Geheugenspel javascript - Pascal ter Heege

De onderstaande code draagt zorg voor een interactieve website om het geheugen te trainen. Via een array in javascript worden reeksen samengesteld in een specifieke volgorde. De items kunnen worden verplaatst met de muis. Wanneer een item op de juiste plek staat wordt deze groen.

01<!DOCTYPE html>
02<html lang="en">
03 
04<head>
05    <meta charset="UTF-8">
06    <meta name="viewport" content="width=device-width, initial-scale=1.0">
07    <title>Geheugenspel javascript</title>
08    <link rel="stylesheet" href="style.css">
09</head>
10 
11<body>
12 
13    <select id="sequenceSelect" onchange="scrambleRows()">
14        <!-- Keuzemenu -->
15    </select>
16 
17    <ul id="sortable-list" ondragover="allowDrop(event)" ondrop="drop(event)">
18        <!-- Lijst  -->
19    </ul>
20 
21    <div class="button-container">
22        <button onclick="previousSequence()">Vorige</button>
23        <button onclick="nextSequence()">Volgende</button>
24    </div>
25 
26    <div class="button-container">
27        <button onclick="scrambleRows()">Scramble</button>
28        <button onclick="placeInCorrectOrder()">Oplossen</button>
29    </div>
30 
31    <script src="script.js"></script>
32 
33</body>
34 
35</html>

01ul {
02    list-style-type: none;
03    padding: 0;
04    margin: 0;
05}
06 
07li {
08    border: 1px solid #ddd;
09    padding: 10px;
10    margin: 5px;
11    transition: background-color 0.3s;
12    cursor: grab;
13}
14 
15li.dragging {
16    opacity: 0.5;
17    cursor: grabbing;
18}
19 
20li.correct-position {
21    background-color: lightgreen;
22}
23 
24select {
25    margin-top: 10px;
26}
27 
28select, button {
29    display: block;
30    width: 100%;
31    margin: 10px 0;
32}
33 
34.button-container {
35    display: flex;
36    justify-content: space-between;
37}
38 
39.button-container button {
40    width: 48%;
41}

001// array met keuzes
002const arrReeksen = [
003    'Reeks 1, A, B, C',
004    'Reeks 2, D, E, F'
005];
006 
007// vorige reeks
008function previousSequence() {
009    var select = document.getElementById('sequenceSelect');
010    if (select.selectedIndex > 0) {
011        select.selectedIndex--;
012        scrambleRows();
013    }
014}
015 
016// volgende reeks
017function nextSequence() {
018    var select = document.getElementById('sequenceSelect');
019    if (select.selectedIndex < select.options.length - 1) {
020        select.selectedIndex++;
021        scrambleRows();
022    }
023}
024 
025// array inlezen
026function readArr(arrReeksen) {
027     
028    const sequences = {};
029     
030    for (let i = 0; i < arrReeksen.length; i++) {
031        const values = arrReeksen[i].split(',');
032        const sequenceName = values[0].trim();
033        sequences[sequenceName] = {};
034 
035        for (let j = 1; j < values.length; j++) {
036            sequences[sequenceName][j] = values[j].trim();
037        }
038    }
039 
040    return sequences;
041}
042 
043// keuzemenu voorzien van waarden
044function populateDropdown(sequences) {
045    var sequenceSelect = document.getElementById("sequenceSelect");
046 
047    // Clear existing options
048    sequenceSelect.innerHTML = "";
049 
050    // Add options based on loaded sequences
051    Object.keys(sequences).forEach(function(sequenceName) {
052        var option = document.createElement("option");
053        option.value = sequenceName;
054        option.text = sequenceName;
055        sequenceSelect.add(option);
056    });
057}
058 
059// items door elkaar zetten
060function scrambleRows() {
061 
062    var sequenceSelect = document.getElementById("sequenceSelect");
063    var sortableList = document.getElementById("sortable-list");
064 
065    sortableList.innerHTML = "";
066 
067    var selectedSequence = sequenceSelect.value;
068    var items = Object.values(sequences[selectedSequence]);
069 
070    shuffleArray(items);
071 
072    items.forEach(function(item) {
073        var listItem = createListItem(item);
074        sortableList.appendChild(listItem);
075    });
076 
077    checkOrder();
078}
079 
080function shuffleArray(array) {
081    for (var i = array.length - 1; i > 0; i--) {
082        var j = Math.floor(Math.random() * (i + 1));
083        var temp = array[i];
084        array[i] = array[j];
085        array[j] = temp;
086    }
087}
088 
089function createListItem(text) {
090    var listItem = document.createElement("li");
091    listItem.textContent = text;
092    listItem.draggable = true;
093    listItem.addEventListener('dragstart', dragStart);
094    listItem.addEventListener('dragend', dragEnd);
095    return listItem;
096}
097 
098function allowDrop(event) {
099    event.preventDefault();
100}
101 
102function dragStart(event) {
103    event.dataTransfer.setData('text/plain', event.target.textContent);
104    event.target.classList.add('dragging');
105}
106 
107function dragEnd(event) {
108    event.target.classList.remove('dragging');
109}
110 
111// item plaatsen
112function drop(event) {
113    event.preventDefault();
114    const draggedText = event.dataTransfer.getData('text/plain');
115    const draggedItem = document.querySelector('.dragging');
116 
117    if (draggedItem) {
118        const targetItem = event.target.closest('li');
119 
120        if (targetItem && targetItem !== draggedItem) {
121            const tempText = targetItem.textContent;
122            targetItem.textContent = draggedText;
123            draggedItem.textContent = tempText;
124            checkOrder();
125        }
126    }
127}
128 
129// oorspronkelijke volgorde
130function placeInCorrectOrder() {
131    var sequenceSelect = document.getElementById("sequenceSelect");
132    var sortableList = document.getElementById("sortable-list");
133 
134    sortableList.innerHTML = "";
135 
136    var selectedSequence = sequenceSelect.value;
137    var items = Object.values(sequences[selectedSequence]);
138 
139    items.forEach(function(item) {
140        var listItem = createListItem(item);
141        sortableList.appendChild(listItem);
142    });
143 
144    checkOrder();
145}
146 
147function isItemInCorrectPosition(item) {
148    const selectedSequence = document.getElementById("sequenceSelect").value;
149    const correctPosition = sequences[selectedSequence][Array.from(item.parentNode.children).indexOf(item) + 1];
150    return item.textContent.trim() === correctPosition;
151}
152 
153function checkOrder() {
154    const listItems = document.querySelectorAll('#sortable-list li');
155 
156    listItems.forEach(item => {
157        if (isItemInCorrectPosition(item)) {
158            item.classList.add('correct-position');
159        } else {
160            item.classList.remove('correct-position');
161        }
162    });
163}
164 
165var sequences = readArr(arrReeksen);
166populateDropdown(sequences);
167scrambleRows();