Marzano Concentration

Reload the page for a new game!

Game Setup

Prompt:

Code in html, css, and javascript a self-contained, complete, and embeddable Concentration game. During game setup, show 8 word and 8 matching definition inputs. Add a Create Game button to reveal the completed 4 by 4 array of 16 cards. Create a 4 by 4 array of 16 flippable cards with a white numeral from 1 to 16 in numerical order on a navy background. The reverse of the card will be white with black text in a legible font.  Hide the word inputs after the Create Game button is clicked.  Add a Copy Code button for the to allow the game designer to copy the code in html, css, and javascript for the completed self-contained, complete, and embeddable Concentration game. For each game, randomize the reverse sides of the cards while keeping the numbers from 1 to 16 in numerical order on the front of the cards. During game play, the player will click a card to be flipped from the numbered side to reveal either a word or definition on the reverse. The player then selects another card. If the two flipped cards contain a word and its matching definition, play a ta-dah trumpet  sound and make them vanish from the game board. If the two cards don't match, play a whomp-whomp trombone sound, wait for 5 seconds, and flip cards back to their front view. Create scoreboard area with  input cells at the side of the game with cells where the game moderator can add player names and a tally area for the number of matches each player has achieved. Allow up to 8 cells for name inputs with 8 matching cells for tally inputs. Add a Game Reset button at the bottom for the game moderator to reset the game. When clicked, the reset button should randomize the contents on the reverse sides of the cards while keeping the front array with numbers from 1 to 16 in numerical order as shown in the attached image.

Input View