New
Je bent een leerkracht wiskunde in een middelbare school bij leerlingen van 13 jaar. Je wil een memory game met 10 kaarten. In dit spel moeten studenten paren vormen. Elke kaart bevat bewerking van 2 tot een macht 1 tot 5 (bijvoorbeeld 2³) of de uitkomst van de machtoefening. Als de kaarten matchen, blijven ze omgedraaid en kunnen ze niet opnieuw worden geklikt. Na het vinden van alle combinaties verschijnt er een knop om het spel opnieuw te laden. Je wil van deze memory de HTML-code hebben om te kopiëren en plakken in Google Sites met een aangename lay-out voor jongeren.
Apr 11, 6:45pm

Here is the HTML code for the memory game. You can copy and paste this code into Google Sites to create an interactive memory game for your students. The game features a pleasant layout designed for young learners:

html
<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Memory Game</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background-color: #f0f8ff;
            margin: 0;
            height: 100vh;
        }
        .memory-game {
            display: grid;
            grid-template-columns: repeat(5, 100px);
            grid-template-rows: repeat(2, 100px);
            gap: 10px;
        }
        .card {
            width: 100px;
            height: 100px;
            background-color: #ff69b4;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            border-radius: 8px;
            cursor: pointer;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        .card.flipped {
            background-color: #ffc0cb;
        }
        .card.matched {
            background-color: #98fb98;
            cursor: default;
            pointer-events: none;
        }
        #reset-button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            background-color: #ff69b4;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            display: none;
        }
    </style>
</head>
<body>
    <div class="memory-game" id="memory-game">
        <div class='card'>2¹</div>
        <div class='card'>2³</div>
        <div class='card'>2</div>
        <div class='card'>2²</div>
        <div class='card'>8</div>
        <div class='card'>2⁴</div>
        <div class='card'>4</div>
        <div class='card'>2⁵</div>
        <div class='card'>16</div>
        <div class='card'>32</div>
    </div>
    <button id="reset-button">Speel opnieuw</button>
    <script>
        const cards = document.querySelectorAll('.card');
        let flippedCards = [];
        let matchedPairs = 0;

        function flipCard() {
            if (flippedCards.length < 2 && !this.classList.contains('flipped')) {
                this.classList.add('flipped');
                flippedCards.push(this);
                if (flippedCards.length === 2) {
                    setTimeout(checkForMatch, 1000);
                }
            }
        }

        function checkForMatch() {
            const [card1, card2] = flippedCards;
            const expression = card1.innerText;
            const result = eval(expression.replace('²', '**2').replace('³', '**3').replace('⁴', '**4').replace('⁵', '**5'));

            if (card2.innerText == result || card1.innerText == eval(card2.innerText.replace('²', '**2').replace('³', '**3').replace('⁴', '**4').replace('⁵', '**5'))) {
                card1.classList.add('matched');
                card2.classList.add('matched');
                matchedPairs++;
                if (matchedPairs === 5) {
                    document.getElementById('reset-button').style.display = 'block';
                }
            } else {
                card1.classList.remove('flipped');
                card2.classList.remove('flipped');
            }
            flippedCards = [];
        }

        function resetGame() {
            cards.forEach(card => {
                card.classList.remove('flipped', 'matched');
            });
            flippedCards = [];
            matchedPairs = 0;
            document.getElementById('reset-button').style.display = 'none';
        }

        cards.forEach(card => card.addEventListener('click', flipCard));
        document.getElementById('reset-button').addEventListener('click', resetGame);
    </script>
</body>
</html>

This code creates a memory game with 10 cards, each displaying either a power of 2 or the result of that power. When two cards match, they remain flipped. Once all pairs are found, a button appears to reset the game.

Apr 11, 6:45pm
De antwoorden van de kaartjes zijn verborgen bij de start van het spel. Na het klikken met de muis verschijnt het antwoord.
Apr 11, 6:48pm

To implement the memory game where the answers are hidden at the start and revealed upon clicking, we need to modify the HTML and JavaScript code. Here's the updated code that hides the card content initially and reveals it upon clicking:

html
<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Memory Game</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background-color: #f0f8ff;
            margin: 0;
            height: 100vh;
        }
        .memory-game {
            display: grid;
            grid-template-columns: repeat(5, 100px);
            grid-template-rows: repeat(2, 100px);
            gap: 10px;
        }
        .card {
            width: 100px;
            height: 100px;
            background-color: #ff69b4;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            border-radius: 8px;
            cursor: pointer;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            position: relative;
        }
        .card.hidden::after {
            content: '?';
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ffc0cb;
            border-radius: 8px;
        }
        .card.flipped {
            background-color: #ffc0cb;
        }
        .card.matched {
            background-color: #98fb98;
            cursor: default;
            pointer-events: none;
        }
        #reset-button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            background-color: #ff69b4;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            display: none;
        }
    </style>
</head>
<body>
    <div class="memory-game" id="memory-game">
        <div class='card hidden'>2¹</div>
        <div class='card hidden'>2³</div>
        <div class='card hidden'>2</div>
        <div class='card hidden'>2²</div>
        <div class='card hidden'>8</div>
        <div class='card hidden'>2⁴</div>
        <div class='card hidden'>4</div>
        <div class='card hidden'>2⁵</div>
        <div class='card hidden'>16</div>
        <div class='card hidden'>32</div>
    </div>
    <button id="reset-button">Speel opnieuw</button>
    <script>
        const cards = document.querySelectorAll('.card');
        let flippedCards = [];
        let matchedPairs = 0;

        function flipCard() {
            if (flippedCards.length < 2 && !this.classList.contains('flipped')) {
                this.classList.remove('hidden');
                this.classList.add('flipped');
                flippedCards.push(this);
                if (flippedCards.length === 2) {
                    setTimeout(checkForMatch, 1000);
                }
            }
        }

        function checkForMatch() {
            const [card1, card2] = flippedCards;
            const expression = card1.innerText;
            const result = eval(expression.replace('²', '**2').replace('³', '**3').replace('⁴', '**4').replace('⁵', '**5'));

            if (card2.innerText == result || card1.innerText == eval(card2.innerText.replace('²', '**2').replace('³', '**3').replace('⁴', '**4').replace('⁵', '**5'))) {
                card1.classList.add('matched');
                card2.classList.add('matched');
                matchedPairs++;
                if (matchedPairs === 5) {
                    document.getElementById('reset-button').style.display = 'block';
                }
            } else {
                card1.classList.add('hidden');
                card2.classList.add('hidden');
                card1.classList.remove('flipped');
                card2.classList.remove('flipped');
            }
            flippedCards = [];
        }

        function resetGame() {
            cards.forEach(card => {
                card.classList.add('hidden');
                card.classList.remove('flipped', 'matched');
            });
            flippedCards = [];
            matchedPairs = 0;
            document.getElementById('reset-button').style.display = 'none';
        }

        cards.forEach(card => card.addEventListener('click', flipCard));
        document.getElementById('reset-button').addEventListener('click', resetGame);
    </script>
</body>
</html>

Key Changes:

  • CSS: Added a .hidden::after style to display a "?" over the card content initially.
  • JavaScript: Modified the flipCard function to remove the hidden class when a card is clicked, revealing its content.

This setup ensures that the card content is hidden at the start and revealed only when clicked.

Apr 11, 6:48pm
de oefening doet vreemd bij 2 tot de eerste macht en 2. Kan je dit eens bekijken? Deze 2 kaarten lijken niet te matchen.
Apr 11, 6:50pm

The issue arises because the expression 2¹ is interpreted as 2*1 instead of 2. This is due to the superscript "¹" not being recognized as a mathematical operator in JavaScript's eval function. To fix this, we need to adjust the code to handle the superscript "¹" correctly.

Here's the corrected version of the HTML code:

html
<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Memory Game</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background-color: #f0f8ff;
            margin: 0;
            height: 100vh;
        }
        .memory-game {
            display: grid;
            grid-template-columns: repeat(5, 100px);
            grid-template-rows: repeat(2, 100px);
            gap: 10px;
        }
        .card {
            width: 100px;
            height: 100px;
            background-color: #ff69b4;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            border-radius: 8px;
            cursor: pointer;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            position: relative;
        }
        .card.hidden::after {
            content: '?';
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ffc0cb;
            border-radius: 8px;
        }
        .card.flipped {
            background-color: #ffc0cb;
        }
        .card.matched {
            background-color: #98fb98;
            cursor: default;
            pointer-events: none;
        }
        #reset-button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            background-color: #ff69b4;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            display: none;
        }
    </style>
</head>
<body>
    <div class="memory-game" id="memory-game">
        <div class='card hidden'>2¹</div>
        <div class='card hidden'>2³</div>
        <div class='card hidden'>2</div>
        <div class='card hidden'>2²</div>
        <div class='card hidden'>8</div>
        <div class='card hidden'>2⁴</div>
        <div class='card hidden'>4</div>
        <div class='card hidden'>2⁵</div>
        <div class='card hidden'>16</div>
        <div class='card hidden'>32</div>
    </div>
    <button id="reset-button">Speel opnieuw</button>
    <script>
        const cards = document.querySelectorAll('.card');
        let flippedCards = [];
        let matchedPairs = 0;

        function flipCard() {
            if (flippedCards.length < 2 && !this.classList.contains('flipped')) {
                this.classList.remove('hidden');
                this.classList.add('flipped');
                flippedCards.push(this);
                if (flippedCards.length === 2) {
                    setTimeout(checkForMatch, 1000);
                }
            }
        }

        function checkForMatch() {
            const [card1, card2] = flippedCards;
            const expression1 = card1.innerText.replace('²', '**2').replace('³', '**3').replace('⁴', '**4').replace('⁵', '**5').replace('¹', '');
            const expression2 = card2.innerText.replace('²', '**2').replace('³', '**3').replace('⁴', '**4').replace('⁵', '**5').replace('¹', '');

            const result1 = eval(expression1);
            const result2 = eval(expression2);

            if (result1 == result2 || expression1 == result2 || expression2 == result1) {
                card1.classList.add('matched');
                card2.classList.add('matched');
                matchedPairs++;
                if (matchedPairs === 5) {
                    document.getElementById('reset-button').style.display = 'block';
                }
            } else {
                card1.classList.add('hidden');
                card2.classList.add('hidden');
                card1.classList.remove('flipped');
                card2.classList.remove('flipped');
            }
            flippedCards = [];
        }

        function resetGame() {
            cards.forEach(card => {
                card.classList.add('hidden');
                card.classList.remove('flipped', 'matched');
            });
            flippedCards = [];
            matchedPairs = 0;
            document.getElementById('reset-button').style.display = 'none';
        }

        cards.forEach(card => card.addEventListener('click', flipCard));
        document.getElementById('reset-button').addEventListener('click', resetGame);
    </script>
</body>
</html>

Key Adjustments:

  • JavaScript: Modified the checkForMatch function to correctly interpret 2¹ as 2 by removing the superscript "¹" before evaluating the expression.

This should resolve the issue with the cards 2¹ and 2 not matching correctly.

Apr 11, 6:50pm

This Chat is read-only. Login to resume chatting.

<!DOCTYPE html> <html lang="nl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Memory Game</title> <style> body { font-family: 'Arial', sans-serif; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: #f0f8ff; margin: 0; height: 100vh; } .memory-game { display: grid; grid-template-columns: repeat(5, 100px); grid-template-rows: repeat(2, 100px); gap: 10px; } .card { width: 100px; height: 100px; background-color: #ff69b4; display: flex; justify-content: center; align-items: center; font-size: 24px; border-radius: 8px; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .card.flipped { background-color: #ffc0cb; } .card.matched { background-color: #98fb98; cursor: default; pointer-events: none; } #reset-button { margin-top: 20px; padding: 10px 20px; font-size: 16px; background-color: #ff69b4; color: white; border: none; border-radius: 8px; cursor: pointer; display: none; } </style> </head> <body> <div class="memory-game" id="memory-game"> <div class='card'>2¹</div> <div class='card'>2³</div> <div class='card'>2</div> <div class='card'>2²</div> <div class='card'>8</div> <div class='card'>2⁴</div> <div class='card'>4</div> <div class='card'>2⁵</div> <div class='card'>16</div> <div class='card'>32</div> </div> <button id="reset-button">Speel opnieuw</button> <script> const cards = document.querySelectorAll('.card'); let flippedCards = []; let matchedPairs = 0; function flipCard() { if (flippedCards.length < 2 && !this.classList.contains('flipped')) { this.classList.add('flipped'); flippedCards.push(this); if (flippedCards.length === 2) { setTimeout(checkForMatch, 1000); } } } function checkForMatch() { const [card1, card2] = flippedCards; const expression = card1.innerText; const result = eval(expression.replace('²', '**2').replace('³', '**3').replace('⁴', '**4').replace('⁵', '**5')); if (card2.innerText == result || card1.innerText == eval(card2.innerText.replace('²', '**2').replace('³', '**3').replace('⁴', '**4').replace('⁵', '**5'))) { card1.classList.add('matched'); card2.classList.add('matched'); matchedPairs++; if (matchedPairs === 5) { document.getElementById('reset-button').style.display = 'block'; } } else { card1.classList.remove('flipped'); card2.classList.remove('flipped'); } flippedCards = []; } function resetGame() { cards.forEach(card => { card.classList.remove('flipped', 'matched'); }); flippedCards = []; matchedPairs = 0; document.getElementById('reset-button').style.display = 'none'; } cards.forEach(card => card.addEventListener('click', flipCard)); document.getElementById('reset-button').addEventListener('click', resetGame); </script> </body> </html>
<!DOCTYPE html> <html lang="nl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Memory Game</title> <style> body { font-family: 'Arial', sans-serif; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: #f0f8ff; margin: 0; height: 100vh; } .memory-game { display: grid; grid-template-columns: repeat(5, 100px); grid-template-rows: repeat(2, 100px); gap: 10px; } .card { width: 100px; height: 100px; background-color: #ff69b4; display: flex; justify-content: center; align-items: center; font-size: 24px; border-radius: 8px; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); position: relative; } .card.hidden::after { content: '?'; position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #ffc0cb; border-radius: 8px; } .card.flipped { background-color: #ffc0cb; } .card.matched { background-color: #98fb98; cursor: default; pointer-events: none; } #reset-button { margin-top: 20px; padding: 10px 20px; font-size: 16px; background-color: #ff69b4; color: white; border: none; border-radius: 8px; cursor: pointer; display: none; } </style> </head> <body> <div class="memory-game" id="memory-game"> <div class='card hidden'>2¹</div> <div class='card hidden'>2³</div> <div class='card hidden'>2</div> <div class='card hidden'>2²</div> <div class='card hidden'>8</div> <div class='card hidden'>2⁴</div> <div class='card hidden'>4</div> <div class='card hidden'>2⁵</div> <div class='card hidden'>16</div> <div class='card hidden'>32</div> </div> <button id="reset-button">Speel opnieuw</button> <script> const cards = document.querySelectorAll('.card'); let flippedCards = []; let matchedPairs = 0; function flipCard() { if (flippedCards.length < 2 && !this.classList.contains('flipped')) { this.classList.remove('hidden'); this.classList.add('flipped'); flippedCards.push(this); if (flippedCards.length === 2) { setTimeout(checkForMatch, 1000); } } } function checkForMatch() { const [card1, card2] = flippedCards; const expression = card1.innerText; const result = eval(expression.replace('²', '**2').replace('³', '**3').replace('⁴', '**4').replace('⁵', '**5')); if (card2.innerText == result || card1.innerText == eval(card2.innerText.replace('²', '**2').replace('³', '**3').replace('⁴', '**4').replace('⁵', '**5'))) { card1.classList.add('matched'); card2.classList.add('matched'); matchedPairs++; if (matchedPairs === 5) { document.getElementById('reset-button').style.display = 'block'; } } else { card1.classList.add('hidden'); card2.classList.add('hidden'); card1.classList.remove('flipped'); card2.classList.remove('flipped'); } flippedCards = []; } function resetGame() { cards.forEach(card => { card.classList.add('hidden'); card.classList.remove('flipped', 'matched'); }); flippedCards = []; matchedPairs = 0; document.getElementById('reset-button').style.display = 'none'; } cards.forEach(card => card.addEventListener('click', flipCard)); document.getElementById('reset-button').addEventListener('click', resetGame); </script> </body> </html>
<!DOCTYPE html> <html lang="nl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Memory Game</title> <style> body { font-family: 'Arial', sans-serif; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: #f0f8ff; margin: 0; height: 100vh; } .memory-game { display: grid; grid-template-columns: repeat(5, 100px); grid-template-rows: repeat(2, 100px); gap: 10px; } .card { width: 100px; height: 100px; background-color: #ff69b4; display: flex; justify-content: center; align-items: center; font-size: 24px; border-radius: 8px; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); position: relative; } .card.hidden::after { content: '?'; position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #ffc0cb; border-radius: 8px; } .card.flipped { background-color: #ffc0cb; } .card.matched { background-color: #98fb98; cursor: default; pointer-events: none; } #reset-button { margin-top: 20px; padding: 10px 20px; font-size: 16px; background-color: #ff69b4; color: white; border: none; border-radius: 8px; cursor: pointer; display: none; } </style> </head> <body> <div class="memory-game" id="memory-game"> <div class='card hidden'>2¹</div> <div class='card hidden'>2³</div> <div class='card hidden'>2</div> <div class='card hidden'>2²</div> <div class='card hidden'>8</div> <div class='card hidden'>2⁴</div> <div class='card hidden'>4</div> <div class='card hidden'>2⁵</div> <div class='card hidden'>16</div> <div class='card hidden'>32</div> </div> <button id="reset-button">Speel opnieuw</button> <script> const cards = document.querySelectorAll('.card'); let flippedCards = []; let matchedPairs = 0; function flipCard() { if (flippedCards.length < 2 && !this.classList.contains('flipped')) { this.classList.remove('hidden'); this.classList.add('flipped'); flippedCards.push(this); if (flippedCards.length === 2) { setTimeout(checkForMatch, 1000); } } } function checkForMatch() { const [card1, card2] = flippedCards; const expression1 = card1.innerText.replace('²', '**2').replace('³', '**3').replace('⁴', '**4').replace('⁵', '**5').replace('¹', ''); const expression2 = card2.innerText.replace('²', '**2').replace('³', '**3').replace('⁴', '**4').replace('⁵', '**5').replace('¹', ''); const result1 = eval(expression1); const result2 = eval(expression2); if (result1 == result2 || expression1 == result2 || expression2 == result1) { card1.classList.add('matched'); card2.classList.add('matched'); matchedPairs++; if (matchedPairs === 5) { document.getElementById('reset-button').style.display = 'block'; } } else { card1.classList.add('hidden'); card2.classList.add('hidden'); card1.classList.remove('flipped'); card2.classList.remove('flipped'); } flippedCards = []; } function resetGame() { cards.forEach(card => { card.classList.add('hidden'); card.classList.remove('flipped', 'matched'); }); flippedCards = []; matchedPairs = 0; document.getElementById('reset-button').style.display = 'none'; } cards.forEach(card => card.addEventListener('click', flipCard)); document.getElementById('reset-button').addEventListener('click', resetGame); </script> </body> </html>