Je bent een leerkracht natuurwetenschappen in een middelbare school bij leerlingen van 13 jaar. Je wil een spel maken waarbij leerlingen een symbool en de betekenis van een symbool met elkaar te combineren. De symbolen en de betekenissen staan bij het begin van het spel door elkaar. Aan de linkerzijde van het spel staan de symbolen en aan de rechterzijde staan de betekenissen van het symbool. Je leerlingen kunnen de begrippen aan de linkerzijde verslepen naar de rechterzijde om ze te combineren. Als de combinatie juist is, blijft het symbool op de betekenis van het symbool liggen. Als de combinatie fout is beweegt het symbool terug naar de linkerzijde. Als alle combinaties correct zijn, kan de leerling het spel opnieuw spelen.
Onderstaande lijst is een opsomming van symbolen links van het : en de betekenis van het symbool rechts van het :
m:massa
V:volume
U:spanning
I:stroomsterkte
R:weerstandJe wil van dit spel de HTML-code hebben om te kopiëren en plakken in Google Sites met een aangename lay-out voor jongeren.
Apr 11, 6:54pm

Hier is de HTML-code voor het spel dat je kunt gebruiken op Google Sites. Deze code bevat een aantrekkelijke lay-out voor jongeren en maakt gebruik van slepen en neerzetten om symbolen en hun betekenissen te combineren:

html
<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wetenschappen Match Spel</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f8ff;
        }
        .game-container {
            display: flex;
            justify-content: space-between;
            width: 80%;
            max-width: 800px;
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .symbols, .meanings {
            width: 45%;
        }
        .symbols div, .meanings div {
            padding: 10px;
            margin: 10px 0;
            border: 2px solid #007BFF;
            border-radius: 5px;
            text-align: center;
            cursor: pointer;
            background-color: #e7f1ff;
        }
        .meanings div {
            border: 2px dashed #28a745;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <div class="symbols">
            <div draggable="true" id="m">m</div>
            <div draggable="true" id="V">V</div>
            <div draggable="true" id="U">U</div>
            <div draggable="true" id="I">I</div>
            <div draggable="true" id="R">R</div>
        </div>
        <div class="meanings">
            <div data-match="m">massa</div>
            <div data-match="V">volume</div>
            <div data-match="U">spanning</div>
            <div data-match="I">stroomsterkte</div>
            <div data-match="R">weerstand</div>
        </div>
    </div>

    <script>
        const symbols = document.querySelectorAll('.symbols div');
        const meanings = document.querySelectorAll('.meanings div');

        symbols.forEach(symbol => {
            symbol.addEventListener('dragstart', () => {
                symbol.classList.add('dragging');
            });

            symbol.addEventListener('dragend', () => {
                symbol.classList.remove('dragging');
            });
        });

        meanings.forEach(meaning => {
            meaning.addEventListener('dragover', (e) => {
                e.preventDefault();
                const dragging = document.querySelector('.dragging');
                if (dragging && meaning.dataset.match === dragging.id) {
                    meaning.style.border = '2px solid #28a745';
                } else {
                    meaning.style.border = '2px dashed #28a745';
                }
            });

            meaning.addEventListener('dragleave', () => {
                meaning.style.border = '2px dashed #28a745';
            });

            meaning.addEventListener('drop', () => {
                const dragging = document.querySelector('.dragging');
                if (meaning.dataset.match === dragging.id) {
                    meaning.style.border = '2px solid #28a745';
                    meaning.innerHTML = dragging.id;
                    dragging.style.display = 'none';
                } else {
                    meaning.style.border = '2px dashed #28a745';
                }
            });
        });
    </script>
</body>
</html>

Kopieer en plak deze code in je Google Site om het spel te gebruiken. Het spel is interactief en helpt leerlingen om symbolen en hun betekenissen te leren door ze te matchen.

Apr 11, 6:54pm

This is a shared conversation and may include unverified content that doesn't reflect Mistral AI's views. 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>Wetenschappen Match Spel</title> <style> body { font-family: 'Arial', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f8ff; } .game-container { display: flex; justify-content: space-between; width: 80%; max-width: 800px; background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .symbols, .meanings { width: 45%; } .symbols div, .meanings div { padding: 10px; margin: 10px 0; border: 2px solid #007BFF; border-radius: 5px; text-align: center; cursor: pointer; background-color: #e7f1ff; } .meanings div { border: 2px dashed #28a745; } </style> </head> <body> <div class="game-container"> <div class="symbols"> <div draggable="true" id="m">m</div> <div draggable="true" id="V">V</div> <div draggable="true" id="U">U</div> <div draggable="true" id="I">I</div> <div draggable="true" id="R">R</div> </div> <div class="meanings"> <div data-match="m">massa</div> <div data-match="V">volume</div> <div data-match="U">spanning</div> <div data-match="I">stroomsterkte</div> <div data-match="R">weerstand</div> </div> </div> <script> const symbols = document.querySelectorAll('.symbols div'); const meanings = document.querySelectorAll('.meanings div'); symbols.forEach(symbol => { symbol.addEventListener('dragstart', () => { symbol.classList.add('dragging'); }); symbol.addEventListener('dragend', () => { symbol.classList.remove('dragging'); }); }); meanings.forEach(meaning => { meaning.addEventListener('dragover', (e) => { e.preventDefault(); const dragging = document.querySelector('.dragging'); if (dragging && meaning.dataset.match === dragging.id) { meaning.style.border = '2px solid #28a745'; } else { meaning.style.border = '2px dashed #28a745'; } }); meaning.addEventListener('dragleave', () => { meaning.style.border = '2px dashed #28a745'; }); meaning.addEventListener('drop', () => { const dragging = document.querySelector('.dragging'); if (meaning.dataset.match === dragging.id) { meaning.style.border = '2px solid #28a745'; meaning.innerHTML = dragging.id; dragging.style.display = 'none'; } else { meaning.style.border = '2px dashed #28a745'; } }); }); </script> </body> </html>