I am writing a program for a website that is supposed to show a svg map and to learn geography. The idea is: you have the map and choose topics (rivers, cities, neighbours). Depending on your choice an array is created. Then a random elements ID is displayed and you click it. If you answer correctly, you get a positive feedback, if not you get a negative feedback. So far works as a charm. My problem now is the following: If I answer the first time correctly, that first element is always considered correct for all the following tasks (alongside the proper solution). So here it is asking for ID "Dresden" But is accepting ID "Meißen" as correct answer too. Only Dresden should return positive feedback.
Full code:
// arrays of possible features
let nachbarn = Array.from(document.querySelectorAll(".nachbarn"));
let flüsse = Array.from(document.querySelectorAll(".fluss"));
let städte = Array.from(document.querySelectorAll(".stadt"));
let kreisstädte = Array.from(document.querySelectorAll(".kreisstadt"));
// checkbox selection: what to excercise?
const checkBoxNachbar = document.getElementById('contentNachbarn');
checkBoxNachbar.addEventListener('change', (event) => {
if (event.currentTarget.checked === true) {
nachbarn.forEach((item) => {
item.style.visibility = 'visible';
})
openTasks.push(nachbarn);
} else {
nachbarn.forEach((item) => {
item.style.visibility = 'hidden';
})
}
})
const checkBoxFlüsse = document.getElementById('contentFlüsse');
checkBoxFlüsse.addEventListener('change', (event) => {
if (event.currentTarget.checked === true) {
flüsse.forEach((item) => {
item.style.visibility = 'visible';
})
} else {
flüsse.forEach((item) => {
item.style.visibility = 'hidden';
})
}
})
const checkBoxStädte = document.getElementById('contentStädte');
checkBoxStädte.addEventListener('change', (event) => {
if (event.currentTarget.checked === true) {
städte.forEach((item) => {
item.style.visibility = 'visible';
})
} else {
städte.forEach((item) => {
item.style.visibility = 'hidden';
})
}
})
// array depending on checkbox choices
function createCustomArray() {
let openTasks = [];
let checkboxArray = [checkBoxNachbar, checkBoxFlüsse, checkBoxStädte];
let arrayArray = [nachbarn, flüsse, städte];
for (i = 0; i < 3; i++) {
if (checkboxArray[i].checked === true) {
openTasks = openTasks.concat(arrayArray[i])
}
}
return openTasks
}
//create random element
function randomObject(array) {
let num = array.length;
let random = Math.floor((Math.random())*num);
let randomThing = array[random].id;
return [random, randomThing]
}
// display random object
function showRandomObject(output) {
output = output.replace(/_/ , ' ');
document.getElementById('question').innerHTML = output;
}
// compare values and open feedback box
let correctCounter = 0;
let overallCounter = 0;
function positiveFeedback() {
correctCounter++;
document.getElementById('feedback').innerHTML = 'Super gemacht!';
document.getElementById('counters').innerHTML = `${correctCounter} von ${overallCounter} richtig`;
document.getElementById('feedbackBox').style.visibility = 'visible';
}
function negativeFeedback() {
document.getElementById('feedback').innerHTML = 'Schade!';
document.getElementById('counters').innerHTML = `${correctCounter} von ${overallCounter} richtig`;
document.getElementById('feedbackBox').style.visibility = 'visible';
}
function compare(array, input) {
overallCounter++;
array.forEach((item) => {
item.addEventListener("click", function(event) {
if (event.currentTarget.id === input) {
positiveFeedback();
} else {
negativeFeedback();
}
})
})
}
//button1 function
function learning() {
overallCounter = 0;
correctCounter = 0;
openTasks = createCustomArray();
[random, randomThing] = randomObject(openTasks);
showRandomObject(randomThing);
compare(openTasks, randomThing);
}
// button2 function
function continueLearning() {
if(openTasks.length > 0) {
let out = openTasks.splice(random, 1);
[random, randomThing] = randomObject(openTasks);
showRandomObject(randomThing);
compare(openTasks, randomThing);
document.getElementById('feedbackBox').style.visibility = 'hidden';
return [openTasks, randomThing]
} else {
document.getElementById('feedback').innerHTML = 'Alles geschafft';
document.getElementById('counters').innerHTML = `${correctCounter} von ${overallCounter} richtig`;
weiterLernen.style.visibility = 'hidden';
document.getElementById('schließenLernen').style.visibility = 'visible';
}
}
const startLernen = document.getElementById('startLernen');
startLernen.addEventListener('click', learning)
let weiterLernen = document.getElementById('weiterLernen');
weiterLernen.addEventListener("click", continueLearning);
document.getElementById('schließenLernen').addEventListener('click', () => {
openTasks = [];
overallCounter = 0;
correctCounter = 0;
document.getElementById('feedbackBox').style.visibility = 'hidden';
document.getElementById('schließenLernen').style.visibility = 'hidden';
}).wrapper {
display: flex;
justify-content: space-around;
}
.nachbarn {
fill:#FFFFFF;
stroke:#E50000;
stroke-width:3;
stroke-miterlimit:10;
}
.kreis {
fill:#FFFFFF;
stroke:#E50000;
stroke-width:11;
stroke-miterlimit:10;
}
.stadt {
fill:#F40000;
stroke:#000000;
stroke-width:3;
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:10;
}
.fluss {
fill:none;
stroke:#6699FF;
stroke-width:6;
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:10;
}
svg {
width: 50%;
border: #000000 solid 3px;
border-radius: 1rem;
}
/* hover states */
.fluss:hover {
fill:none;
stroke:#6699FF;
stroke-width:12;
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:10;
}
.nachbarn:hover {
fill:#a0490291;
stroke:#E50000;
stroke-width:10;
stroke-miterlimit:10;
}
.stadt:hover {
fill:#F40000;
stroke:#000000;
stroke-width:6;
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:10;
transform-box: fill-box;
transform-origin: center;
transform: scale(1.5);
}
#feedbackBox {
align-self: center;
position: absolute;
background-color: #6699FF;
padding: 2svh;
border-radius: 1svh;
visibility: hidden;
}
#feedback {
font-size: 6svh;
font-family: 'Sarabun', sans-serif;
}
#schließenLernen {
visibility: hidden;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="saechsischeSchweizOsterzgebirge.css">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1560 1080" style="enable-background:new 0 0 1560 1080;" xml:space="preserve" id="ssomap">
<g>
<path class="nachbarn kreis" id="Dresden" d="M357.5,59.6c-0.4,6.4-1.1,13-4.4,18.6c-12.2,21-46.8,11.6-65.5,27.1c-4.9,4-8.2,15.3-16.1,36.8
c-6.4,17.6-7.1,24.3-6.9,30c0.3,12.1,4.5,20.9,7.8,27.8c4.2,8.8,11.1,23.3,26.3,31c6,3.1,11.7,4.2,17,4.8
c28.6,3.7,59.9,6.9,84.4-8.3c1.1,7.8,2.3,15.7,3.4,23.5c0.1,0.6,0.2,0.7,2.8,8.8c5.2,16.2,5.2,16.3,5.5,16.8
c4,8.6,15,11.4,28.1,14.8c8,2.1,25.7,6.6,46.4,1.7c8.1-1.9,11.2-4,19-3.9c10.8,0.1,19,4.2,24.7,7c5.6,2.8,14,7.9,22.3,16.8
c7.4,7.1,14,12.5,19.2,16.4c5.8,4.4,10.6,7.5,14.1,9.8c7.1,4.6,10.6,6.9,14.9,9c4.8,2.4,13.9,6.8,25.8,7c3.9,0.1,19.7,0.4,31.6-9.8
c6.3-5.4,6.6-9.6,17-18.3c4.7-4,7.1-6,11-7.4c10.1-3.9,20.1-0.7,24.7,0.8c10.3,3.3,10.2,6.9,18,7.8c9.8,1.2,17.6-3.5,19.6-4.7
c6.3-3.9,9.5-9,12.9-14.5c1.1-1.8,4-6.7,6.3-13.7c1.6-5.2,2.2-9.1,2.4-10.8c1-6.2,3.7-15.4,11.7-28c5.1,0.5,12.4,0.4,18.8-3.6
c5.2-3.3,6.6-7,11.6-12.1c8.7-8.8,13.9-7,20.3-12.4c17-14.4,3.5-47.9,16-65c3.5-4.7,5.7-10.3,8.8-15.3c1.5-2.4,3.4-5.2,3-8.8
c-0.3-2.7-1.7-4.3-3.4-6.7c-5.1-6.9-3.9-11-7.3-12.3c-12-4.8-26.2-2.5-37.5-8.5c-6.5-3.5-11.3-9.3-15.9-14.9
c-12.9-15.7-25.8-31.5-38.7-47.2c-8.1-9.9-16.5-20.2-20-32.6c-1.4-4.8-2-10.1-5.2-14c-3.4-4.1-8.9-5.7-14.1-7
c-39.9-9.6-81.4-9.6-122.4-9.6c-73.5,0-146.9,0.1-220.4,0.1c-15.4,0-23.2,4.4-21.9,19.3C354.4,24.2,358.5,41,357.5,59.6z"/>
</g>
<g >
<path class="nachbarn kreis" id="Meißen" d="M34.4,244.1c2-2.2,0.4-3.8,2.2-12.1c0.8-3.5,2.7-12.2,8.9-20c3.8-4.9,7.8-7.6,11.3-9.8
c5.4-3.5,11.2-6.1,27.6-10.4c9.3-2.4,16.5-4.3,27.8-6.3c4.2-0.7,15.2-2.5,34.8-3.9c11-0.8,23.8-1.2,48.9-1.9
c9.7-0.3,20.6-0.6,35.2-2.4c15.2-2,23.1-4.2,28.9-10.4c3.3-3.5,5.2-7.5,7.5-12.3c3.6-7.5,4.4-12.1,6.5-18.9
c4.6-15.2,7.8-25.7,16.3-31.6c1.3-0.9,0.9-1.6,18.7-5c10.9-2.1,21.6-5.7,31.5-10.7c3.7-1.9,7.5-4.1,9.9-7.6
c3.1-4.6,3.3-10.6,3.3-16.2c0.1-23.4,0.2-46.8,0.3-70.2C241.6-2.5,129.2-19,17.1-12.6C8.2-12.1-1.1-11.2-8.3-6
c-6.3,4.6-10,12.1-12.3,19.6c-7.6,24.4-3.6,50.7-0.8,76.1c3.6,32,5.2,64.2,4.9,96.3c-0.2,20.6-0.6,33.6,8.8,44.8
C4.5,245.4,28.4,250.8,34.4,244.1z"/>
</g>
<g >
<path class="nachbarn kreis" id="Mittelsachsen" d="M79.4,272.9c1.8,3.8-3.2,8.1-11.2,20.9c-0.4,0.6-8.6,13.9-12.9,25c-3.7,9.6-11.6,30-2.7,42.7
c6.2,8.8,18.2,10.5,40.6,13.6c9,1.3,16.6,1.6,21.9,1.6c1.4,5.5,2.7,13.7-0.4,22.1c-5.7,15.8-21.3,18.2-34.7,34.2
c-5.4,6.4-11.9,16.8-15.1,33.4c3.5,1.7,9.6,4.1,17.5,4.6c9.3,0.5,16.5-1.9,20.3-3.5c-1.1,4.8-2.3,11.4-2.6,19.3
c-0.9,19,3.3,33.1,4.4,36.8c4.3,13.9,10.9,24.3,16.1,31.1c6.7,6.5,14.7,14.7,23.2,24.7c6.1,7.2,12.7,15.4,27.8,37.2
c33.2,47.9,35.5,57.1,32.1,63c-3,5.1-8.2,4.3-13.3,12.5c-1.3,2.1-7.1,12.1-3.6,20.8c3,7.5,11.2,10.2,24.4,14.4
c22.3,7.1,26.4,2.3,36,8.7c12.1,8,9.4,18,20.7,26.5c7,5.2,18.1,8.9,36.8,5.7c-0.4,9.9-2,23.2-7.5,37.9c-7.2,19.5-16.4,28.4-12.3,38
c3.1,7.2,11.5,9.9,21.3,13.1c23.3,7.5,28.9-1,42.7,4.7c16.4,6.8,12,20.5,40.1,50.2c5.3,5.6,11.3,12,20.5,19.3
c20.9,16.6,32,17.2,32.6,24.7c1,12.7-29.3,20.9-31,38.4c-0.2,1.8-0.7,6.9-4.2,11.1c-2.1,2.6-5.5,3.8-8.8,4.6
c-15.2,3.8-31.6,1.8-46,7.9c-30,12.8-35.7,52.2-37,84.9c-105.1,4-210.2,7.9-315.2,11.9c-5.2,0.2-11,0.2-14.8-3.2
c-4.7-4.2-4.6-11.4-4.2-17.6c6.6-96.9,2.9-194.5-11.2-290.7c-7-48.1-16.7-96.1-17.2-144.8c-0.6-60.1,12.8-119.4,17.1-179.4
c3.8-53.6,0.4-107.5-5.3-160.9c-1.2-11-14.7-39.2-2.8-65.5c5.7-12.6,17.5-26.6,27.7-25.1c8.8,1.3,8.9,13.1,20.9,17
c11.5,3.7,17.7-5.1,26.4-0.5c8.6,4.5,4.9,14.1,14.1,21.1C61.9,274.3,76.6,266.8,79.4,272.9z"/>
</g>
<g >
<path class="nachbarn kreis" id="Bautzen" d="M766.8,62c7.1,8.4,7.1,8.7,20.1,24.5c5.8,7,10.5,12.7,13.6,16.3c2.1,3.2,5.8,7.6,11.6,10.6
c1.6,0.8,4.9,2.3,19.8,4.2c13.3,1.7,16.5,1.2,18.9,4.3c2.5,3.2,1.3,6.3,5,10.2c2.1,2.2,4.8,3.8,7,4.3c7.5,1.7,12.2-9.4,23.8-16.4
c10.8-6.6,23.7-14.4,39.1-13.6c14.8,0.8,23.3,9.3,28.5,4.8c2.2-1.9,1.6-4.2,2.7-14c1.5-13.2,2.8-24.9,7.2-26.2
c3.4-1,5.8,5.1,13,10.7c15.2,12,36,9.4,43.8,8.5c6.7-0.8,19.6-2.4,31.3-11.5c11.9-9.2,10.9-17.2,22-22.1c8.5-3.8,21-4.3,27.4,2
c5.9,5.8,1.4,12.3,6.5,20c7,10.7,26.8,15.6,39.3,9c15.2-7.9,8.8-27,24-36c13.6-8.1,32.2-0.8,44.1,3.9c15.7,6.2,27.2,15.7,42.7,28.4
c18.5,15.3,20.1,20.1,27.5,20.3c15.3,0.6,18-19.3,39.6-28.7c26.6-11.6,56.1,4.1,60,6.3c18.1,10,19.6,21,38,44.6
c0,0,33.4,42.8,126.5,80.9c4.1,1.7,12.3,4.5,19.7,1.4c9.8-4.2,11.7-16.9,12.3-27.5c2.7-49.9,5.4-99.7,8.1-149.6
c0.4-7.8,0.7-16.2-3.1-23c-2.6-4.6-6.9-8.1-11.3-11.1c-59.1-41.4-137.9-33.6-210.1-35.3c-120.2-2.9-239.2-37.4-359.2-29.1
c-39.3,2.7-78.1,10-116.8,17.3c-23.7,4.5-47.3,8.9-71,13.4c-21.6,4.1-46.8,5.4-67.4,12.9c-0.7,0.3-5.2,3.9-14.2,10.9
c-6.8,5.3-10.6,8.3-9.9,11c0.4,1.5,1.8,1.4,4.1,3.9c1.7,1.8,2.7,3.8,4.5,9.2c1.9,5.7,3,10.1,3.1,10.7c0.6,2.4,2.1,7.2,11.9,20.2
C755.9,49.7,757.7,51.3,766.8,62z"/>
</g>
<g >
<path class="nachbarn" id="Tschechische_Republik" d="M320.9,1059.7c4.7-18.3,11.4-26,13.5-28.2c10.6-11.5,24.1-15.2,27.1-16c9.8-2.5,11.6,0,26.9-3.3
c16.5-3.5,19.3-7.4,20.1-8.7c3.1-4.9,0.7-8.7,5.1-16c2-3.4,4.3-5.6,7-8c4.4-4.1,10.4-8.3,14.8-11.4c2.6-1.8,4.9-3.3,5.9-6.3
c0.9-2.8-0.1-4.6,0.9-5.5c2.1-1.8,9.2,3.5,13.2,6.3c4.1,2.9,11.2,6.5,25.4,13.7c19.7,10,18.6,6.5,31.3,14.1
c6.2,3.7,8.8,5.9,12.8,5.4c8.1-1.1,11.9-11.8,15.8-18.7c10.2-17.7,30-23.9,52.1-30.9c11.9-3.7,41.1-11,74.2-2.3
c26,6.9,35.5,18.7,54.9,13.9c1.2-0.3,21.6-5.6,24.2-18.1c1.6-7.4-4.2-12.4-1.2-17.2c2.8-4.5,10.5-4.3,23-3.8
c11.5,0.5,24.4,1.1,38.5,2.1c2.3-6.2,5.1-16.2,4.5-28.3c-0.9-17.6-8.2-21.7-14.1-47c-5.9-25.4-2.3-37.2-1.2-40.5
c2.9-8.4,7.4-14.6,10.8-18.4c6,14.8,25.8,19.6,40.9,14.4c15.1-5.2,26.4-17.6,37-29.5c17.8-19.9,35.5-39.8,53.3-59.7
c12.9,22.8,41.9,35.1,67.2,28.6c13.9-3.6,23.8-9.4,29.3-13.6c67.2-50.5,177.9-106.8,194.2-114.7c1.2-0.6,14.1-6.8,29.3-17.9
c11.2-8.2,16.9-12.4,20.8-19.1c9.4-15.9-1.1-25.8,5.1-40.3c11.6-27.1,63.4-28.5,66.9-28.6c22.4-0.4,22.5,6.7,45,6.3
c15.2-0.3,24-3.6,65.3-18.4c9.4-3.4,27.9-10,52.8-18.8c-12.4-17.1-12.6-27.8-10.4-34.5c2.7-8.5,9.2-10.7,15.5-25.4
c3.4-7.9,6.1-14,3.9-20c-4.4-12.2-25-13.6-26.2-13.7c-10.2,0-25.6-0.8-43.8-4.3c-24.3-4.7-41.3-8-55.6-21.5
c-5.4-5.1-15.6-16.6-20.3-37.9c6.4-1.3,14.7-3.7,23.5-8.6c6.1-3.4,9.8-5.5,11-9.4c2-6.5-4-15.4-14.4-22.5
c-6.2-0.2-15.4,0.2-25.4,4.3c-9.8,4.1-12.9,8.7-21.6,11.1c-5.6,1.6-14.3,2.5-26.6-2c-4.2-1.8-16.1-7.5-22.4-20.5
c-9.4-19.3,1.1-39.1,2-40.6c9.1-16.6,22.9-15.7,30.4-31.7c5-10.6,3.9-21.7,2.3-29.1c-4.2-6.9-8.5-13.8-12.7-20.7
c11-5.5,26.9-15.4,39.2-32.9c12-17.1,14.3-32.7,23.4-33.7c7.8-0.9,13.5,9.8,23.6,23.5c0,0,29.1,39.5,69.5,65.9
c10.9,7.1,22.9,13.2,47,25.4c13.7,7,5.1,1.8,20.4,9c3.3,1.5,6.4,3.1,11,3.7c5.6,0.8,8.7-0.4,12.6-0.7c0,0,8-0.6,20.3,6.5
c24.9,14.2,29.4,66,29.4,66c30.8,259.8,24.6,523.9-18.5,781.9c-3.7,22.3-8.7,46.4-25.8,61.2c-12.9,11.2-30.5,15.1-47.4,18.3
c-164.6,31.6-332.5,43.7-499.9,42.6c-167.1-1.1-333.8-15.4-499.4-36.4c-47.1-6-94.1-12.6-141.1-19.5c-25.1-3.7-52.8,5.5-65.2-10.5
C309.7,1102.9,317,1074.7,320.9,1059.7z"/>
</g>
<g >
<path class="kreis" id="SaechsischeSchweizOsterzgebirge" d="M68.1,195.3c-16.3,8.2-32,21.8-34.1,40c-2.6,23.1,23.1,44.5,45.4,37.6c-19.9,26.1-31,58.7-31.1,91.5
c21.4,7.7,44.1,11.9,66.8,12.4c-0.1,7.4-0.3,14.8-0.4,22.1c-27.6,12.2-47.9,39.6-51.5,69.5c10.7,5.9,23.7,7.3,35.4,4
c-7.3,39.6,16.1,78,41.5,109.1c25.4,31.1,55.1,61.6,64.1,100.8c-11.4,3.5-20.7,13.2-23.7,24.7c15.7,20.6,42.8,32,68.5,28.8
c2.1,25,32.8,42.9,55.6,32.4c-3.6,28.3-11.5,56.1-23.4,82c19.4,13.4,44.8,17.8,67.6,11.7c40.7,63.2,104.2,111.5,176,133.7
c31.6-46.2,95.1-67.6,148.2-50c16.1,5.3,32,13.9,48.9,12.1c16.8-1.8,32.6-21.4,23-35.4c20-5.4,41.3-6,61.6-1.7
c11.3-21.8,1.3-48-6.2-71.4s-10.3-53.6,9.4-68.3c1.2,15.6,20.8,24.1,35.8,19.9c15.1-4.2,26.1-16.6,36.3-28.5
c17.8-20.7,35.5-41.3,53.3-62c4.5,23,30.7,36.4,54.1,34.8c23.4-1.6,44.4-14.1,64.4-26.3c70.1-42.9,140.3-85.7,210.4-128.6
c8.5-5.2,17.6-11.1,20.6-20.6c2.8-8.9-0.5-18.5,0.5-27.8c2.3-21.7,27.1-34,48.9-34.3c21.8-0.4,43.3,6.9,65.1,5.7
c15.5-0.9,30.4-6,45-11c25.7-8.9,51.5-17.8,77.2-26.7c-14.9-4.7-23.3-23.6-16.9-37.8c5.6-12.4,20.4-21.2,19.9-34.9
c-0.6-15.3-19.5-22.1-34.8-23.6c-23.3-2.3-47.3-1.7-69.3-9.7c-22-8-42-27.7-41.2-51c9.9-4.5,19.9-8.9,29.8-13.4
c14.1-7.6-1.4-30.9-17.4-29.7c-16,1.1-29.1,13.3-44.8,16.7c-17.2,3.7-36.4-4.9-45.1-20.3c-8.7-15.4-6.2-36.2,5.8-49.1
c30.2-8.3,39.8-55.1,15.3-74.6c26.3-14.7,47.2-39,57.7-67.2c-22.3-16.8-57.2-13.3-75.8,7.4c-6.2,6.9-12.4,16.2-21.6,15.7
c-7.6-0.4-12.9-7.4-17.7-13.4c-22.4-27.9-58.4-44.3-94.1-43.1c-1.7,18.5-12.8,37.4-30.6,42.4s-40-10.5-36.7-28.8
c-5.2-9.9-19.8-10.4-29.5-5s-16.6,14.7-25.3,21.7c-24.4,19.5-64,16.2-84.8-7.2c-6,12.5-9.4,26.3-10,40.2
c-49.8-17.6-110.8,22.4-114.5,75c-1,14.5,0.8,31.4-9.8,41.4c-10.4,9.8-27.6,7.4-40,14.5c-16.3,9.3-19.5,30.7-24.2,48.9
s-18.4,38.7-36.8,35.2c-9-1.7-16-9-24.9-11.1c-22.6-5.3-37.8,23-58.9,32.7c-23.7,10.9-51.1-3.4-71-20.2
c-19.9-16.8-38.9-37.6-64.5-42.1c-17.9-3.2-36.1,2.3-54.3,3s-39.3-5.8-45.5-23c-4.7-13.1-0.2-30.8-11.5-39
c-10.9-7.9-25.5,0.7-37.9,5.8c-35.1,14.2-78-9.9-89.7-44.6c-3.4-10,0-19-10.5-20.6c-9.6-1.4-26.2,5.7-36.4,6.8
c-24.8,2.7-49.9,2.4-74.8,3.9C121.2,179.1,93.2,182.8,68.1,195.3z"/>
</g>
<g >
<path class="stadt kreisstadt" id="Pirna" d="M818,304.9c0.8,6.7-7,13.1-4.2,19.2c-3.2,1.1-6.9,0.5-9.7-1.5c-0.6-0.4-1.2-1-1.9-1c-0.9,0-1.6,0.7-2.3,1.3
c-3.3,3-8.1,4.1-12.4,3c-0.8,2.1-1.1,4.5-0.8,6.8c1.8-0.1,3.3,1.7,3.5,3.5s-0.3,3.6-0.7,5.4c-1,4.7-1,9.5,0.1,14.2
c-3.9,0.2-7.6,2.7-9.3,6.3c-0.4,0.9-0.7,2-1.5,2.7c-1.7,1.8-4.5,1.2-7,1.3c-5.5,0.2-10.4,4.9-11.2,10.3s2.5,11.1,7.4,13.6
c1.2,0.6,2.5,1,3.6,1.9c1,0.8,1.7,1.8,2.8,2.4c4.8,2.7,9.7-5.3,15.1-4.5c3,0.4,6.3,3.5,8.7,1.5c0.8-0.7,1.2-1.9,2.1-2.5
c1.1-0.8,2.6-0.4,3.9-0.3c3.4,0.3,6.9-0.9,9.3-3.3c2,2,1.4,6-1.2,7.3c-1.4,0.7-3.2,0.7-4.2,1.8c-2.3,2.6,2,6.3,1.6,9.7
c-0.2,2-1.9,3.4-3.2,4.9c-1.3,1.5-2.5,3.7-1.4,5.4c2.8,0.8,6.1,1.5,8.3-0.4c2.2-1.9,3.1-6,6-5.7c1.8,0.2,2.7,2.3,4,3.7
c1.8,2.1,5.1,3,7.7,1.9s4.5-3.8,4.4-6.7c3-0.7,6.2-1.4,8.9-0.1c1.2,0.6,2.3,1.5,3.6,1.7c3.2,0.5,5.4-2.9,7.1-5.6
c1.7-2.7,5.6-5.2,7.8-2.9c0.5-4.2,1-8.3,1.6-12.5c0.1-0.8,0.2-1.6,0.8-2.2c0.5-0.5,1.2-0.6,1.8-1c1.3-0.9,1.6-2.6,1.7-4.2
c0.1-6.4-3.1-13.4-9.2-15.2c-2.3-0.7-4.9-0.6-7.1-1.7c-3.6-1.9-4.6-7.3-2-10.4c1.6-1.9,4.3-2.8,6.1-4.6s2.5-5.4,0.2-6.5
c-0.9-0.4-2-0.4-2.5-1.2c-0.7-1.1,0.6-2.4,1.6-3.3c2.5-2.5,3-6.9,0.8-9.7c-2.1-2.7-6.6-4.7-5.6-7.9c-3.9,1-8.3-1.5-9.4-5.4
c-1.3-4.5,1.1-10.3-3.5-13.5c-2.7-1.9-7.1-1.5-10.2-2.5C827.6,299.4,818.3,307.8,818,304.9z"/>
</g>
<g >
<path class="fluss" id="Elbe" d="M1282.1,704.7c0.8-16.7,1.5-33.4,2.3-50.1c0.2-4.2,0.3-8.7-1.9-12.3c-2-3.2-5.5-5.1-8.2-7.6
c-12.4-11.8-5.8-32.2,0.2-48.3c9.1-24.3,14.5-52.9,1.5-75.4c-11.3-19.4-33.7-29.5-55.6-34.4c-21.9-4.9-44.7-5.9-66-13
c-14.9-5-28.6-12.9-43.3-18.2s-31.4-8-45.9-2.2c-14.1,5.6-27.3,18.9-41.9,14.8c-4-3.4-8.8-8.7-9.2-15.5
c-1.2-19.9,36.8-28.6,37.1-50.2c0.2-11.1-9.9-21.7-19.4-25.1c-2.4-0.9-7.4-2.2-32.6,6.4c-21.9,7.5-33.2,11.3-46.7,20.8
c-10.9,7.6-10.3,9.9-15.9,11.4c-14.3,3.8-24.7-8.9-47-20.9c-15.2-8.2-33.7-18.2-55.6-17.5c-26.4,0.8-35,16.5-60.3,11.7
c-7.1-1.3-16.7-3.2-23.5-11c-10.4-12-2.8-24.8-9.4-50.9c-1.6-6.2-5.6-21.5-16.4-35.2c-14.4-18.1-34.5-25.4-47.7-28.6"/>
</g>
<g >
<path class="fluss" id="Kirnitzsch" d="M1475.4,500.2c-3.4-12.9-13-24-25.2-29.3c-7.1-3.1-15.9-5.2-18.9-12.3c-1.8-4.5-0.6-9.6,0.7-14.2
c-6-1-12.4,0.8-17,4.8c-1.1-4.3-6.8-4.8-11.1-5.9c-9.2-2.3-15.5-10.6-23-16.4c-1.1-0.9-2.3-1.7-3.7-2c-1.8-0.4-3.6,0.2-5.4,0.8
c-8.6,2.7-17.8,4.5-26.6,2.7s-17.1-8.2-19.2-16.9c-0.5-2.3-0.7-4.8-2.2-6.6c-3.2-3.9-9.8-1.6-13.2,2.2c-3.4,3.8-5.6,8.9-10.2,11.2
c-1.7,0.9-3.5,1.3-5.2,2.1c-2.2,1.1-4,2.8-5.9,4.3c-8.9,6.7-20.7,7.6-31.7,8.2c-2.1,0.1-4.7,0-5.6-1.9c-0.6-1.2-0.2-2.7-0.8-4
c-0.6-1.3-2.2-1.8-3.6-2.1c-8.7-1.9-17.8-0.7-26.6,0.5c-2.3,0.3-4.7,0.6-6.7,1.8c-3,1.7-4.8,5-7.5,7.2c-8.4,6.8-21.5,1.2-31.5,5.3
c-5.8,2.4-12.3,8.8-16.1,26"/>
</g>
<g >
<path class="fluss" id="Sebnitz_fl" d="M1438.9,330c-18.2,10.6-34.1,13.2-42.9,13.9c-12.3,1-22.8-0.6-31.3-1.9c-9.7-1.5-14.5-2.2-20.3-4.9
c-5.9-2.7-7.5-4.9-13.3-6c-4.2-0.8-6.9-0.3-11.6-2.3c-2.2-0.9-3.1-1.6-5.7-2.5c-2.7-0.9-5.5-1.2-8.3-1.3c-9.8-0.4-19.4,1.9-29,4.2
c-4.7,1.1-9.6,2.3-13.5,5.2c-3.9,2.9-6.8,7.8-5.6,12.6c0.6,2.5,2.2,4.9,1.5,7.3c-1.2,4-6.8,3.7-10.8,5.1c-5.7,2-8.5,8.2-11.2,13.6
c-2.7,5.4-7.1,11.2-13.1,10.9c-4.2-0.2-8.6-3.4-12.3-1.3c-1.8,1-2.7,3-4.1,4.5c-2.1,2.1-4.5,1.6-11.6,2.2c-2,0.2-4.9,0.5-8.5,1
c-2.3,6.1-5.4,8.5-7.7,9.5c-5.7,2.6-10.9-1.5-18.3,2.5c-1.8,1-3.3,2.6-5.2,3.3c-7.7,2.9-14.1-9.7-22.2-8.3c-2.8,0.5-5,2.7-6.6,5
c-6.2,8.8-6.5,19.6-5.4,37c0.3,4.8,0.7,8.7,1,11.3"/>
</g>
<g >
<path class="fluss" id="Wesenitz" d="M1034.5,50.4c0.2,6.5-8.3,9.5-11.2,15.3c-2.9,5.7,0.4,12.8-1,19c-0.8,3.5-2.9,6.4-4.4,9.6
c-2.9,6.6-2.6,14.4,0.7,20.8c-6.6,1.5-11.4,8.7-10.4,15.4c-4.9-3.4-12.1,1-13.8,6.7s0.3,11.8,2.3,17.4c1.4,3.8,2.8,8.1,1.3,11.9
c-3.9,9.8-19.9,5-28.1,11.6c-1.1,0.9-2.1,2-3.4,2.6c-4.6,2-10.3-3.9-14.6-1.3c0,3-0.6,6.3-2.7,8.4c-2.1,2.1-6.1,2.5-8,0.2
c-2.1-2.6-0.6-6.5-1.9-9.5c-0.9-2.1-2.9-3.4-4.9-4.3c-13.5-6.5-31.3-2.1-40.4,9.8s-8.5,30.2,1.2,41.6c6,7.1,15.6,13,15.7,22.3
c0.1,4.9-2.6,9.3-5.2,13.4c5.1,1.8,10.4,3.7,14.3,7.6c3.8,3.9,5.6,10.3,2.6,14.8c-2.2,3.3-6.2,4.7-9.6,6.5s-6.9,5.1-6.4,9
c-5,3.1-10.1-3.9-15.7-5.6c-3.5-1.1-7.3,0-11,0.1c-6.5,0.2-12.6-2.9-18.9-4.2c-6.4-1.3-14.2-0.1-17.2,5.6
c-3.1,6.1,0.2,15.6-5.7,19.1c-3.8,2.3-9,0-13.1,1.6c-4.9,1.9-6.1,8.1-7.8,13.1c-1.7,5-4.5,9.6-7.2,14.1c-2.5,4-5.1,8.2-9.1,10.6
c-4.1,2.4-10,2.3-12.9-1.4c-2.7,6.1-8.5,10.2-14.1,13.9c-3.5,2.3-8.3,4.6-11.4,1.9c-1,2.4-1.9,4.8-2.9,7.2"/>
</g>
<g >
<path class="fluss" id="Gottleuba" d="M803.9,788.1c-1.8-3.1-0.3-7.1,2.1-9.8c2.4-2.7,5.5-4.6,7.7-7.3c8.2-10.1,1.2-26,6.5-37.9
c3.2-7.1,10.9-14.2,7.3-21.2c3.7-4.6,7.5-9.3,11.2-13.9c1.2-1.5,2.5-3.1,2.9-5c1.4-6.4-7.1-12.8-4-18.6c5.2-0.5,11.8-3.9,10.4-8.9
c-0.7-2.5-3.3-3.9-5.1-5.9s-2.4-5.7,0-6.7c4.3,1.7,9.3-1.3,11.4-5.4s2-8.9,1.9-13.5c-0.3-9.3-0.5-18.6-0.8-27.9
c-0.1-4-0.2-8.1,1.1-11.9c4.2-12.2,19.5-15.2,31.3-20.5c18.6-8.4,32-27.4,33.5-47.8c0.4-4.9-0.1-10.3-3.7-13.7
c-2.9-2.7-7.2-3.3-10.9-4.9c-3.6-1.7-6.9-5.9-5.1-9.4c-4.9-3.7-6.8-10.8-4.5-16.4c-6.5-0.9-13.2-0.6-19.6,0.9
c-0.9-5.5-6.6-8.5-11.1-11.8c-4.5-3.3-8.4-9.8-4.8-14c-5.2,0.2-9.7-3.8-12.1-8.4s-3.2-9.9-4.8-14.8c-4-12.4-9-15.9-17.2-30.3
c-3.9-6.9-8.8-17.5-11.6-32.4"/>
</g>
<g >
<path class="fluss" id="Müglitz" d="M769.3,937.9c3.3-9.7,0.4-21.2-7.2-28c-4.4-4-10.1-6.4-13.9-11c-11.1-13.4-1.8-39.5-17.4-47.2
c-2.5-1.2-5.3-1.7-7.7-3.2c-3.8-2.4-5.6-6.8-7.8-10.8c-4.9-9.1-12.6-16.7-21.7-21.5c-6.2-0.6-12.5-1.1-18.7-1.7
c4-8.9,1-20.5-6.8-26.4c-3-2.2-6.7-3.9-8.2-7.3c-2.5-5.7,2.5-13.8-2.1-18.1c-2.3-2.2-6-1.9-9-2.7c-8-2.2-11.4-11.4-16.8-17.7
c-5.8-6.7-14.3-10.3-21.2-15.9c-6.9-5.5-12.4-15-8.7-23c-3.4-0.5-6.7-0.9-10.1-1.4c1.4-4.5,2.7-9,4.1-13.5
c-5.6-0.7-10.8-3.4-14.5-7.7c5.1-2.1,10.8-2.7,16.3-1.8c0.2-6.9,5.1-13.3,11.7-15.3c2.9-0.8,6.1-1,8.2-3.1c2.2-2.2,2.3-5.9,4.3-8.3
c2.1-2.6,5.7-3.1,8.9-4.2c12.2-3.9,20.4-17.4,18.3-30c2.3-4,5.2-10.3,5.8-18.4c0.6-8.1-1.8-8.7-2.2-20.1
c-0.4-12.8,2.4-18.4-1.9-23.3c-1.8-2.1-4.4-3.3-6-5.6c-2.5-3.6-1.6-8.5-0.4-12.8c3.6-13.3,8.1-26.5,13.3-39.3
c7.5-1.4,13.4-8.8,13.1-16.4c6.5-0.1,12.6-5.1,13.9-11.5c0.6-3,0.4-6.4,2.5-8.7c4.1-4.5,12.1,0.3,17.5-2.4c3.2-1.6,4.6-5.3,5.7-8.7
c3.4-11.2,5.2-22.9,5.3-34.7c0-1.4,0-3-0.9-4.2c-1.4-1.8-4-1.7-6.2-2.1c-8.8-1.8-11.5-13.5-9.4-22.3c2.1-8.8,7.1-17.1,6.5-26.1
c-0.3-3.9-1.4-8.3,1.1-11.3c4.2,4.6,11.9,2.9,17.5,0c6.8-3.5,13.6-3.4,17.6-5.3"/>
</g>
<g >
<path class="fluss" id="rote_Weißeritz" d="M458.7,566.9c-1.2-5.3-7.7-7.2-13.1-7.3s-11.4,0.7-15.6-2.7c-6.1-4.9-4.3-14.4-3.6-22.2
c0.1-1.4,0.2-2.9-0.3-4.3c-1.1-3.4-4.9-5-7.8-6.9c-8.3-5.5-11.9-16.1-12.2-26.1c-0.3-10,2.1-19.8,3.2-29.7
c-5.6-3.2-11.3-6.4-15.9-10.9c-4.6-4.5-8.1-10.6-8.2-17c-0.1-5.3,1.7-11.7-2.4-15.1c-3.7-3.1-9.9-1-13.7-3.9
c-3.3-2.6-3.3-7.5-3.6-11.6s-2.5-9.3-6.7-9.2c-5.1,0-7.3,7.6-12.3,8.3c-3.4,0.5-6.5-2.7-6.9-6.1c-0.4-3.4,1.2-6.7,3.3-9.4
c0.9-1.2,2-2.3,2.6-3.7c0.9-1.9,0.8-4.1,0.7-6.2c-0.2-5.2-0.3-10.5-0.5-15.7c0-1-0.1-2.1,0.4-3.1c0.5-1.1,1.6-1.8,2.6-2.5
c3.9-2.5,7.8-5.1,11.8-7.6"/>
</g>
<g >
<path class="fluss" id="wilde_Weißeritz" d="M423,852.4c-15.9-6.2-32.3-12.7-44.4-24.8c-7.9-7.9-13.5-17.8-17.1-28.4c-1.6-4.8-2.8-9.8-5.6-14
c-4.6-6.9-12.7-10.7-17.8-17.3c-4.6-6.1-6.2-14.4-4.1-21.7c0.9-3,2.3-5.8,2.7-8.9c1.1-7.8-4.3-14.8-8.6-21.3
c-4.3-6.6-7.6-15.6-2.9-21.9c-7.2,1.1-14-7.4-11.2-14.1c1.4-3.5,4.8-7.3,2.9-10.6c-1.1-1.9-3.6-2.5-4.8-4.3c-1.4-2-0.7-4.7-0.6-7.2
c1-16.9-23.4-26.3-23.8-43.2c-4.1,0.4-7.8-3.1-9.1-7c-1.3-3.9-0.7-8.2-0.1-12.3c-7.6,1.5-14.3-5.3-17.9-12.1s-6.2-14.8-12.5-19.2
c-3.5-2.5-7.9-3.5-11.4-6c-3.5-2.5-6-7.5-3.7-11.1c-4.3-1-8.1-3.9-10.3-7.7c1.7-4.6,6.8-7.6,11.7-6.9c-0.7-3.8-1.4-7.6-2.1-11.5
c6.7-1.8,10.7-10.2,7.8-16.5c4.7-0.1,8.9,2.8,13.4,3.9c7.4,1.9,15.9-1.4,20.1-7.7c4.2-6.4,4-15.4-0.6-21.6
c-2.7-3.5-6.8-7.6-4.7-11.5c1.3-2.5,4.6-3.1,6.4-5.3c3.1-4-0.1-10.7,3.3-14.4c3.7-4,12.9-1.8,13.5-7.2c0.2-1.9-1-3.5-2-5.1
c-6.7-10.6-6.8-24-6.7-36.6c0.1-13.4,0.3-26.8,0.4-40.3c13.3,0.5,27-7,39.4-2.2c1,0.4,1.9,0.8,2.9,1.3c4.5,2.3,7.7,4,8.1,4.2
c2.7,1.5,9.3,0.9,26.6-7.9"/>
</g>
<g >
<path class="fluss" id="vereinigte_Weißeritz" d="M360.5,353.9c3-8,6.8-11.1,9.8-12.3c2.5-1,4-0.9,6.2-2.5c3.1-2.3,3.7-6.6,4-10.5c0.5-5.5,1.4-11.4,5.2-15.5
c1.3-1.4,3-2.6,4-4.3c1.5-2.7,0.9-6,1.4-9c1.3-7.1,8.9-13.6,5.8-20.1c4.5-1.2,9.4-2.6,12-6.5c1.1-1.6,1.7-3.5,3.1-4.7
c2.4-2.1,5.3-1.7,7.8-1.9c3.2-0.2,7.6-1.2,13-4.8"/>
</g>
<g >
<circle class="stadt" id="Heidenau" cx="710.7" cy="338" r="9.2"/>
</g>
<g >
<circle class="stadt" id="Bad_Schandau" cx="1182.9" cy="457" r="9.2"/>
</g>
<g >
<circle class="stadt" id="Königstein" cx="1052.8" cy="469.9" r="9.2"/>
</g>
<g >
<circle class="stadt kreisstadt" id="Sebnitz_st" cx="1333.7" cy="317.2" r="9.2"/>
</g>
<g >
<circle class="stadt" id="Neustadt" cx="1222.6" cy="187.8" r="9.2"/>
</g>
<g >
<circle class="stadt" id="Stolpen" cx="1025.3" cy="147.9" r="9.2"/>
</g>
<g >
<circle class="stadt" id="Bad_Gottleuba-Berggießhübel" cx="856.3" cy="632.3" r="9.2"/>
</g>
<g >
<circle class="stadt kreisstadt" id="Dippoldiswalde" cx="427.5" cy="570.1" r="9.2"/>
</g>
<g >
<circle class="stadt" id="Glashütte" cx="604.3" cy="655" r="9.2"/>
</g>
<g >
<circle class="stadt kreisstadt" id="Freital" cx="374.3" cy="307.9" r="9.2"/>
</g>
<g >
<circle class="stadt" id="Altenberg" cx="590.6" cy="865.8" r="9.2"/>
</g>
<g >
<circle class="stadt" id="Geising" cx="650.5" cy="884.3" r="9.2"/>
</g>
<g >
<circle class="stadt" id="Wilsdruff" cx="199" cy="197" r="9.2"/>
</g>
</svg>
<input type="checkbox" name="Inhalte" id="contentNachbarn" checked>
<label for="contentNachbarn">Nachbarn</label>
<input type="checkbox" name="Inhalte" id="contentFlüsse" checked>
<label for="contentFlüsse">Flüsse</label>
<input type="checkbox" name="Inhalte" id="contentStädte" checked>
<label for="contentStädte">Städte</label><br>
<button id="startLernen">Los geht's</button>
<p id="question"></p>
<div id="feedbackBox">
<p id="feedback"></p>
<p id="counters"></p>
<button id="weiterLernen">Weiter!</button>
<button id="schließenLernen">Schließen!</button>
</div>
</div>
</body>
<script src="zeigen.js"></script>
</html>You'll need to prevent multiple event listeners on your elements.
Just add them once and make them compare against a global variable instead of the argument input in your function compare
The global variable then is set if you change your question / topic.
Edit: I added the code. @Karl i took the freedom to rework some of it. Let it be naming or encapsulate duplicate code in a function. Hope you're fine with that.
// arrays of possible features
let nachbarn = Array.from(document.querySelectorAll(".nachbarn"));
let flüsse = Array.from(document.querySelectorAll(".fluss"));
let städte = Array.from(document.querySelectorAll(".stadt"));
let allTasks = [nachbarn, flüsse, städte].flat();
// compare values and open feedback box
let correctCounter = 0;
let overallCounter = 0;
let searchTarget;
// let the targets listen to onclick and compare against searchTargetId
addClickListenerToAllTasks(allTasks);
/**
* task targets should compare itself with currently active task `searchTarget`
*/
function addClickListenerToAllTasks(array) {
array.forEach((item) => {
item.addEventListener("click", function(event) {
if (searchTarget == null){ // only with active task
return; //TODO: show an info maybe?
}
if (event.currentTarget.id === searchTarget.id) {
positiveFeedback();
} else {
negativeFeedback();
}
});
});
}
/**
* allow tasks visible by checking checkbox.
* @param tasks list of task elements to be shown or hidden
* @param checkbox corresponding checkbox for tasks
*/
function bindTaskVisibilityToCheckbox (tasks, checkbox){
checkbox.addEventListener('change', (event) => {
if (event.currentTarget.checked === true) {
tasks.forEach((item) => {
item.style.visibility = 'visible';
})
} else {
tasks.forEach((item) => {
item.style.visibility = 'hidden';
})
}
});
}
const checkBoxNachbar = document.getElementById('contentNachbarn');
bindTaskVisibilityToCheckbox(nachbarn, checkBoxNachbar);
const checkBoxFlüsse = document.getElementById('contentFlüsse');
bindTaskVisibilityToCheckbox(flüsse, checkBoxFlüsse);
const checkBoxStädte = document.getElementById('contentStädte');
bindTaskVisibilityToCheckbox(städte, checkBoxStädte);
/**
* array depending on checkbox choices
* @returns {Array} list of visible targets
*/
function getOpenTaskArray() {
let openTasks = [];
let checkboxArray = [checkBoxNachbar, checkBoxFlüsse, checkBoxStädte];
let arrayArray = [nachbarn, flüsse, städte];
for (i = 0; i < checkboxArray.length; i++) {
if (checkboxArray[i].checked === true) {
openTasks = openTasks.concat(arrayArray[i]);
}
}
return openTasks.flat();
}
/**
* create random index for given array and return element
* @returns searchTarget
*/
function getRandomSearchTarget(array) {
overallCounter++;
let randomSearchTargetIndex = Math.floor((Math.random()) * array.length);
searchTarget = array[randomSearchTargetIndex];
return searchTarget;
}
/**
* display random object
* @param searchTarget current searchTarget
*/
function showSearchTargetText(searchTarget) {
let output = searchTarget.id.replace(/_/ , ' ');
document.getElementById('question').innerText = output;
}
function positiveFeedback() {
correctCounter++;
document.getElementById('feedback').innerText = 'Super gemacht!';
document.getElementById('counters').innerText = `${correctCounter} von ${overallCounter} richtig`;
document.getElementById('feedbackBox').style.visibility = 'visible';
}
function negativeFeedback() {
document.getElementById('feedback').innerText = 'Schade!';
document.getElementById('counters').innerText = `${correctCounter} von ${overallCounter} richtig`;
document.getElementById('feedbackBox').style.visibility = 'visible';
}
/** start learning. resets values */
function learning() {
overallCounter = 0;
correctCounter = 0;
openTasks = getOpenTaskArray();
searchTarget = getRandomSearchTarget(openTasks);
showSearchTargetText(searchTarget);
}
/** get new task */
function continueLearning() {
if(openTasks.length > 0) {
searchTarget = getRandomSearchTarget(openTasks);
showSearchTargetText(searchTarget);
document.getElementById('feedbackBox').style.visibility = 'hidden';
} else {
document.getElementById('feedback').innerText = 'Alles geschafft';
document.getElementById('counters').innerText = `${correctCounter} von ${overallCounter} richtig`;
document.getElementById('weiterLernen').style.visibility = 'hidden';
document.getElementById('schließenLernen').style.visibility = 'visible';
}
}
/** reset counters + tasks, and hide feedback box and button */
function endLearning(){
openTasks = [];
overallCounter = 0;
correctCounter = 0;
document.getElementById('feedbackBox').style.visibility = 'hidden';
document.getElementById('schließenLernen').style.visibility = 'hidden';
}
// add listeners to buttons
document.getElementById('startLernen').addEventListener('click', learning);
document.getElementById('weiterLernen').addEventListener("click", continueLearning);
document.getElementById('schließenLernen').addEventListener('click', endLearning);.wrapper {
display: flex;
justify-content: space-around;
}
.nachbarn {
fill:#FFFFFF;
stroke:#E50000;
stroke-width:3;
stroke-miterlimit:10;
}
.kreis {
fill:#FFFFFF;
stroke:#E50000;
stroke-width:11;
stroke-miterlimit:10;
}
.stadt {
fill:#F40000;
stroke:#000000;
stroke-width:3;
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:10;
}
.fluss {
fill:none;
stroke:#6699FF;
stroke-width:6;
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:10;
}
svg {
width: 50%;
border: #000000 solid 3px;
border-radius: 1rem;
}
/* hover states */
.fluss:hover {
fill:none;
stroke:#6699FF;
stroke-width:12;
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:10;
}
.nachbarn:hover {
fill:#a0490291;
stroke:#E50000;
stroke-width:10;
stroke-miterlimit:10;
}
.stadt:hover {
fill:#F40000;
stroke:#000000;
stroke-width:6;
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:10;
transform-box: fill-box;
transform-origin: center;
transform: scale(1.5);
}
#feedbackBox {
align-self: center;
position: absolute;
background-color: #6699FF;
padding: 2svh;
border-radius: 1svh;
visibility: hidden;
}
#feedback {
font-size: 6svh;
font-family: 'Sarabun', sans-serif;
}
#schließenLernen {
visibility: hidden;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="saechsischeSchweizOsterzgebirge.css">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1560 1080" style="enable-background:new 0 0 1560 1080;" xml:space="preserve" id="ssomap">
<g>
<path class="nachbarn kreis" id="Dresden" d="M357.5,59.6c-0.4,6.4-1.1,13-4.4,18.6c-12.2,21-46.8,11.6-65.5,27.1c-4.9,4-8.2,15.3-16.1,36.8
c-6.4,17.6-7.1,24.3-6.9,30c0.3,12.1,4.5,20.9,7.8,27.8c4.2,8.8,11.1,23.3,26.3,31c6,3.1,11.7,4.2,17,4.8
c28.6,3.7,59.9,6.9,84.4-8.3c1.1,7.8,2.3,15.7,3.4,23.5c0.1,0.6,0.2,0.7,2.8,8.8c5.2,16.2,5.2,16.3,5.5,16.8
c4,8.6,15,11.4,28.1,14.8c8,2.1,25.7,6.6,46.4,1.7c8.1-1.9,11.2-4,19-3.9c10.8,0.1,19,4.2,24.7,7c5.6,2.8,14,7.9,22.3,16.8
c7.4,7.1,14,12.5,19.2,16.4c5.8,4.4,10.6,7.5,14.1,9.8c7.1,4.6,10.6,6.9,14.9,9c4.8,2.4,13.9,6.8,25.8,7c3.9,0.1,19.7,0.4,31.6-9.8
c6.3-5.4,6.6-9.6,17-18.3c4.7-4,7.1-6,11-7.4c10.1-3.9,20.1-0.7,24.7,0.8c10.3,3.3,10.2,6.9,18,7.8c9.8,1.2,17.6-3.5,19.6-4.7
c6.3-3.9,9.5-9,12.9-14.5c1.1-1.8,4-6.7,6.3-13.7c1.6-5.2,2.2-9.1,2.4-10.8c1-6.2,3.7-15.4,11.7-28c5.1,0.5,12.4,0.4,18.8-3.6
c5.2-3.3,6.6-7,11.6-12.1c8.7-8.8,13.9-7,20.3-12.4c17-14.4,3.5-47.9,16-65c3.5-4.7,5.7-10.3,8.8-15.3c1.5-2.4,3.4-5.2,3-8.8
c-0.3-2.7-1.7-4.3-3.4-6.7c-5.1-6.9-3.9-11-7.3-12.3c-12-4.8-26.2-2.5-37.5-8.5c-6.5-3.5-11.3-9.3-15.9-14.9
c-12.9-15.7-25.8-31.5-38.7-47.2c-8.1-9.9-16.5-20.2-20-32.6c-1.4-4.8-2-10.1-5.2-14c-3.4-4.1-8.9-5.7-14.1-7
c-39.9-9.6-81.4-9.6-122.4-9.6c-73.5,0-146.9,0.1-220.4,0.1c-15.4,0-23.2,4.4-21.9,19.3C354.4,24.2,358.5,41,357.5,59.6z"/>
</g>
<g >
<path class="nachbarn kreis" id="Meißen" d="M34.4,244.1c2-2.2,0.4-3.8,2.2-12.1c0.8-3.5,2.7-12.2,8.9-20c3.8-4.9,7.8-7.6,11.3-9.8
c5.4-3.5,11.2-6.1,27.6-10.4c9.3-2.4,16.5-4.3,27.8-6.3c4.2-0.7,15.2-2.5,34.8-3.9c11-0.8,23.8-1.2,48.9-1.9
c9.7-0.3,20.6-0.6,35.2-2.4c15.2-2,23.1-4.2,28.9-10.4c3.3-3.5,5.2-7.5,7.5-12.3c3.6-7.5,4.4-12.1,6.5-18.9
c4.6-15.2,7.8-25.7,16.3-31.6c1.3-0.9,0.9-1.6,18.7-5c10.9-2.1,21.6-5.7,31.5-10.7c3.7-1.9,7.5-4.1,9.9-7.6
c3.1-4.6,3.3-10.6,3.3-16.2c0.1-23.4,0.2-46.8,0.3-70.2C241.6-2.5,129.2-19,17.1-12.6C8.2-12.1-1.1-11.2-8.3-6
c-6.3,4.6-10,12.1-12.3,19.6c-7.6,24.4-3.6,50.7-0.8,76.1c3.6,32,5.2,64.2,4.9,96.3c-0.2,20.6-0.6,33.6,8.8,44.8
C4.5,245.4,28.4,250.8,34.4,244.1z"/>
</g>
<g >
<path class="nachbarn kreis" id="Mittelsachsen" d="M79.4,272.9c1.8,3.8-3.2,8.1-11.2,20.9c-0.4,0.6-8.6,13.9-12.9,25c-3.7,9.6-11.6,30-2.7,42.7
c6.2,8.8,18.2,10.5,40.6,13.6c9,1.3,16.6,1.6,21.9,1.6c1.4,5.5,2.7,13.7-0.4,22.1c-5.7,15.8-21.3,18.2-34.7,34.2
c-5.4,6.4-11.9,16.8-15.1,33.4c3.5,1.7,9.6,4.1,17.5,4.6c9.3,0.5,16.5-1.9,20.3-3.5c-1.1,4.8-2.3,11.4-2.6,19.3
c-0.9,19,3.3,33.1,4.4,36.8c4.3,13.9,10.9,24.3,16.1,31.1c6.7,6.5,14.7,14.7,23.2,24.7c6.1,7.2,12.7,15.4,27.8,37.2
c33.2,47.9,35.5,57.1,32.1,63c-3,5.1-8.2,4.3-13.3,12.5c-1.3,2.1-7.1,12.1-3.6,20.8c3,7.5,11.2,10.2,24.4,14.4
c22.3,7.1,26.4,2.3,36,8.7c12.1,8,9.4,18,20.7,26.5c7,5.2,18.1,8.9,36.8,5.7c-0.4,9.9-2,23.2-7.5,37.9c-7.2,19.5-16.4,28.4-12.3,38
c3.1,7.2,11.5,9.9,21.3,13.1c23.3,7.5,28.9-1,42.7,4.7c16.4,6.8,12,20.5,40.1,50.2c5.3,5.6,11.3,12,20.5,19.3
c20.9,16.6,32,17.2,32.6,24.7c1,12.7-29.3,20.9-31,38.4c-0.2,1.8-0.7,6.9-4.2,11.1c-2.1,2.6-5.5,3.8-8.8,4.6
c-15.2,3.8-31.6,1.8-46,7.9c-30,12.8-35.7,52.2-37,84.9c-105.1,4-210.2,7.9-315.2,11.9c-5.2,0.2-11,0.2-14.8-3.2
c-4.7-4.2-4.6-11.4-4.2-17.6c6.6-96.9,2.9-194.5-11.2-290.7c-7-48.1-16.7-96.1-17.2-144.8c-0.6-60.1,12.8-119.4,17.1-179.4
c3.8-53.6,0.4-107.5-5.3-160.9c-1.2-11-14.7-39.2-2.8-65.5c5.7-12.6,17.5-26.6,27.7-25.1c8.8,1.3,8.9,13.1,20.9,17
c11.5,3.7,17.7-5.1,26.4-0.5c8.6,4.5,4.9,14.1,14.1,21.1C61.9,274.3,76.6,266.8,79.4,272.9z"/>
</g>
<g >
<path class="nachbarn kreis" id="Bautzen" d="M766.8,62c7.1,8.4,7.1,8.7,20.1,24.5c5.8,7,10.5,12.7,13.6,16.3c2.1,3.2,5.8,7.6,11.6,10.6
c1.6,0.8,4.9,2.3,19.8,4.2c13.3,1.7,16.5,1.2,18.9,4.3c2.5,3.2,1.3,6.3,5,10.2c2.1,2.2,4.8,3.8,7,4.3c7.5,1.7,12.2-9.4,23.8-16.4
c10.8-6.6,23.7-14.4,39.1-13.6c14.8,0.8,23.3,9.3,28.5,4.8c2.2-1.9,1.6-4.2,2.7-14c1.5-13.2,2.8-24.9,7.2-26.2
c3.4-1,5.8,5.1,13,10.7c15.2,12,36,9.4,43.8,8.5c6.7-0.8,19.6-2.4,31.3-11.5c11.9-9.2,10.9-17.2,22-22.1c8.5-3.8,21-4.3,27.4,2
c5.9,5.8,1.4,12.3,6.5,20c7,10.7,26.8,15.6,39.3,9c15.2-7.9,8.8-27,24-36c13.6-8.1,32.2-0.8,44.1,3.9c15.7,6.2,27.2,15.7,42.7,28.4
c18.5,15.3,20.1,20.1,27.5,20.3c15.3,0.6,18-19.3,39.6-28.7c26.6-11.6,56.1,4.1,60,6.3c18.1,10,19.6,21,38,44.6
c0,0,33.4,42.8,126.5,80.9c4.1,1.7,12.3,4.5,19.7,1.4c9.8-4.2,11.7-16.9,12.3-27.5c2.7-49.9,5.4-99.7,8.1-149.6
c0.4-7.8,0.7-16.2-3.1-23c-2.6-4.6-6.9-8.1-11.3-11.1c-59.1-41.4-137.9-33.6-210.1-35.3c-120.2-2.9-239.2-37.4-359.2-29.1
c-39.3,2.7-78.1,10-116.8,17.3c-23.7,4.5-47.3,8.9-71,13.4c-21.6,4.1-46.8,5.4-67.4,12.9c-0.7,0.3-5.2,3.9-14.2,10.9
c-6.8,5.3-10.6,8.3-9.9,11c0.4,1.5,1.8,1.4,4.1,3.9c1.7,1.8,2.7,3.8,4.5,9.2c1.9,5.7,3,10.1,3.1,10.7c0.6,2.4,2.1,7.2,11.9,20.2
C755.9,49.7,757.7,51.3,766.8,62z"/>
</g>
<g >
<path class="nachbarn" id="Tschechische_Republik" d="M320.9,1059.7c4.7-18.3,11.4-26,13.5-28.2c10.6-11.5,24.1-15.2,27.1-16c9.8-2.5,11.6,0,26.9-3.3
c16.5-3.5,19.3-7.4,20.1-8.7c3.1-4.9,0.7-8.7,5.1-16c2-3.4,4.3-5.6,7-8c4.4-4.1,10.4-8.3,14.8-11.4c2.6-1.8,4.9-3.3,5.9-6.3
c0.9-2.8-0.1-4.6,0.9-5.5c2.1-1.8,9.2,3.5,13.2,6.3c4.1,2.9,11.2,6.5,25.4,13.7c19.7,10,18.6,6.5,31.3,14.1
c6.2,3.7,8.8,5.9,12.8,5.4c8.1-1.1,11.9-11.8,15.8-18.7c10.2-17.7,30-23.9,52.1-30.9c11.9-3.7,41.1-11,74.2-2.3
c26,6.9,35.5,18.7,54.9,13.9c1.2-0.3,21.6-5.6,24.2-18.1c1.6-7.4-4.2-12.4-1.2-17.2c2.8-4.5,10.5-4.3,23-3.8
c11.5,0.5,24.4,1.1,38.5,2.1c2.3-6.2,5.1-16.2,4.5-28.3c-0.9-17.6-8.2-21.7-14.1-47c-5.9-25.4-2.3-37.2-1.2-40.5
c2.9-8.4,7.4-14.6,10.8-18.4c6,14.8,25.8,19.6,40.9,14.4c15.1-5.2,26.4-17.6,37-29.5c17.8-19.9,35.5-39.8,53.3-59.7
c12.9,22.8,41.9,35.1,67.2,28.6c13.9-3.6,23.8-9.4,29.3-13.6c67.2-50.5,177.9-106.8,194.2-114.7c1.2-0.6,14.1-6.8,29.3-17.9
c11.2-8.2,16.9-12.4,20.8-19.1c9.4-15.9-1.1-25.8,5.1-40.3c11.6-27.1,63.4-28.5,66.9-28.6c22.4-0.4,22.5,6.7,45,6.3
c15.2-0.3,24-3.6,65.3-18.4c9.4-3.4,27.9-10,52.8-18.8c-12.4-17.1-12.6-27.8-10.4-34.5c2.7-8.5,9.2-10.7,15.5-25.4
c3.4-7.9,6.1-14,3.9-20c-4.4-12.2-25-13.6-26.2-13.7c-10.2,0-25.6-0.8-43.8-4.3c-24.3-4.7-41.3-8-55.6-21.5
c-5.4-5.1-15.6-16.6-20.3-37.9c6.4-1.3,14.7-3.7,23.5-8.6c6.1-3.4,9.8-5.5,11-9.4c2-6.5-4-15.4-14.4-22.5
c-6.2-0.2-15.4,0.2-25.4,4.3c-9.8,4.1-12.9,8.7-21.6,11.1c-5.6,1.6-14.3,2.5-26.6-2c-4.2-1.8-16.1-7.5-22.4-20.5
c-9.4-19.3,1.1-39.1,2-40.6c9.1-16.6,22.9-15.7,30.4-31.7c5-10.6,3.9-21.7,2.3-29.1c-4.2-6.9-8.5-13.8-12.7-20.7
c11-5.5,26.9-15.4,39.2-32.9c12-17.1,14.3-32.7,23.4-33.7c7.8-0.9,13.5,9.8,23.6,23.5c0,0,29.1,39.5,69.5,65.9
c10.9,7.1,22.9,13.2,47,25.4c13.7,7,5.1,1.8,20.4,9c3.3,1.5,6.4,3.1,11,3.7c5.6,0.8,8.7-0.4,12.6-0.7c0,0,8-0.6,20.3,6.5
c24.9,14.2,29.4,66,29.4,66c30.8,259.8,24.6,523.9-18.5,781.9c-3.7,22.3-8.7,46.4-25.8,61.2c-12.9,11.2-30.5,15.1-47.4,18.3
c-164.6,31.6-332.5,43.7-499.9,42.6c-167.1-1.1-333.8-15.4-499.4-36.4c-47.1-6-94.1-12.6-141.1-19.5c-25.1-3.7-52.8,5.5-65.2-10.5
C309.7,1102.9,317,1074.7,320.9,1059.7z"/>
</g>
<g >
<path class="kreis" id="SaechsischeSchweizOsterzgebirge" d="M68.1,195.3c-16.3,8.2-32,21.8-34.1,40c-2.6,23.1,23.1,44.5,45.4,37.6c-19.9,26.1-31,58.7-31.1,91.5
c21.4,7.7,44.1,11.9,66.8,12.4c-0.1,7.4-0.3,14.8-0.4,22.1c-27.6,12.2-47.9,39.6-51.5,69.5c10.7,5.9,23.7,7.3,35.4,4
c-7.3,39.6,16.1,78,41.5,109.1c25.4,31.1,55.1,61.6,64.1,100.8c-11.4,3.5-20.7,13.2-23.7,24.7c15.7,20.6,42.8,32,68.5,28.8
c2.1,25,32.8,42.9,55.6,32.4c-3.6,28.3-11.5,56.1-23.4,82c19.4,13.4,44.8,17.8,67.6,11.7c40.7,63.2,104.2,111.5,176,133.7
c31.6-46.2,95.1-67.6,148.2-50c16.1,5.3,32,13.9,48.9,12.1c16.8-1.8,32.6-21.4,23-35.4c20-5.4,41.3-6,61.6-1.7
c11.3-21.8,1.3-48-6.2-71.4s-10.3-53.6,9.4-68.3c1.2,15.6,20.8,24.1,35.8,19.9c15.1-4.2,26.1-16.6,36.3-28.5
c17.8-20.7,35.5-41.3,53.3-62c4.5,23,30.7,36.4,54.1,34.8c23.4-1.6,44.4-14.1,64.4-26.3c70.1-42.9,140.3-85.7,210.4-128.6
c8.5-5.2,17.6-11.1,20.6-20.6c2.8-8.9-0.5-18.5,0.5-27.8c2.3-21.7,27.1-34,48.9-34.3c21.8-0.4,43.3,6.9,65.1,5.7
c15.5-0.9,30.4-6,45-11c25.7-8.9,51.5-17.8,77.2-26.7c-14.9-4.7-23.3-23.6-16.9-37.8c5.6-12.4,20.4-21.2,19.9-34.9
c-0.6-15.3-19.5-22.1-34.8-23.6c-23.3-2.3-47.3-1.7-69.3-9.7c-22-8-42-27.7-41.2-51c9.9-4.5,19.9-8.9,29.8-13.4
c14.1-7.6-1.4-30.9-17.4-29.7c-16,1.1-29.1,13.3-44.8,16.7c-17.2,3.7-36.4-4.9-45.1-20.3c-8.7-15.4-6.2-36.2,5.8-49.1
c30.2-8.3,39.8-55.1,15.3-74.6c26.3-14.7,47.2-39,57.7-67.2c-22.3-16.8-57.2-13.3-75.8,7.4c-6.2,6.9-12.4,16.2-21.6,15.7
c-7.6-0.4-12.9-7.4-17.7-13.4c-22.4-27.9-58.4-44.3-94.1-43.1c-1.7,18.5-12.8,37.4-30.6,42.4s-40-10.5-36.7-28.8
c-5.2-9.9-19.8-10.4-29.5-5s-16.6,14.7-25.3,21.7c-24.4,19.5-64,16.2-84.8-7.2c-6,12.5-9.4,26.3-10,40.2
c-49.8-17.6-110.8,22.4-114.5,75c-1,14.5,0.8,31.4-9.8,41.4c-10.4,9.8-27.6,7.4-40,14.5c-16.3,9.3-19.5,30.7-24.2,48.9
s-18.4,38.7-36.8,35.2c-9-1.7-16-9-24.9-11.1c-22.6-5.3-37.8,23-58.9,32.7c-23.7,10.9-51.1-3.4-71-20.2
c-19.9-16.8-38.9-37.6-64.5-42.1c-17.9-3.2-36.1,2.3-54.3,3s-39.3-5.8-45.5-23c-4.7-13.1-0.2-30.8-11.5-39
c-10.9-7.9-25.5,0.7-37.9,5.8c-35.1,14.2-78-9.9-89.7-44.6c-3.4-10,0-19-10.5-20.6c-9.6-1.4-26.2,5.7-36.4,6.8
c-24.8,2.7-49.9,2.4-74.8,3.9C121.2,179.1,93.2,182.8,68.1,195.3z"/>
</g>
<g >
<path class="stadt kreisstadt" id="Pirna" d="M818,304.9c0.8,6.7-7,13.1-4.2,19.2c-3.2,1.1-6.9,0.5-9.7-1.5c-0.6-0.4-1.2-1-1.9-1c-0.9,0-1.6,0.7-2.3,1.3
c-3.3,3-8.1,4.1-12.4,3c-0.8,2.1-1.1,4.5-0.8,6.8c1.8-0.1,3.3,1.7,3.5,3.5s-0.3,3.6-0.7,5.4c-1,4.7-1,9.5,0.1,14.2
c-3.9,0.2-7.6,2.7-9.3,6.3c-0.4,0.9-0.7,2-1.5,2.7c-1.7,1.8-4.5,1.2-7,1.3c-5.5,0.2-10.4,4.9-11.2,10.3s2.5,11.1,7.4,13.6
c1.2,0.6,2.5,1,3.6,1.9c1,0.8,1.7,1.8,2.8,2.4c4.8,2.7,9.7-5.3,15.1-4.5c3,0.4,6.3,3.5,8.7,1.5c0.8-0.7,1.2-1.9,2.1-2.5
c1.1-0.8,2.6-0.4,3.9-0.3c3.4,0.3,6.9-0.9,9.3-3.3c2,2,1.4,6-1.2,7.3c-1.4,0.7-3.2,0.7-4.2,1.8c-2.3,2.6,2,6.3,1.6,9.7
c-0.2,2-1.9,3.4-3.2,4.9c-1.3,1.5-2.5,3.7-1.4,5.4c2.8,0.8,6.1,1.5,8.3-0.4c2.2-1.9,3.1-6,6-5.7c1.8,0.2,2.7,2.3,4,3.7
c1.8,2.1,5.1,3,7.7,1.9s4.5-3.8,4.4-6.7c3-0.7,6.2-1.4,8.9-0.1c1.2,0.6,2.3,1.5,3.6,1.7c3.2,0.5,5.4-2.9,7.1-5.6
c1.7-2.7,5.6-5.2,7.8-2.9c0.5-4.2,1-8.3,1.6-12.5c0.1-0.8,0.2-1.6,0.8-2.2c0.5-0.5,1.2-0.6,1.8-1c1.3-0.9,1.6-2.6,1.7-4.2
c0.1-6.4-3.1-13.4-9.2-15.2c-2.3-0.7-4.9-0.6-7.1-1.7c-3.6-1.9-4.6-7.3-2-10.4c1.6-1.9,4.3-2.8,6.1-4.6s2.5-5.4,0.2-6.5
c-0.9-0.4-2-0.4-2.5-1.2c-0.7-1.1,0.6-2.4,1.6-3.3c2.5-2.5,3-6.9,0.8-9.7c-2.1-2.7-6.6-4.7-5.6-7.9c-3.9,1-8.3-1.5-9.4-5.4
c-1.3-4.5,1.1-10.3-3.5-13.5c-2.7-1.9-7.1-1.5-10.2-2.5C827.6,299.4,818.3,307.8,818,304.9z"/>
</g>
<g >
<path class="fluss" id="Elbe" d="M1282.1,704.7c0.8-16.7,1.5-33.4,2.3-50.1c0.2-4.2,0.3-8.7-1.9-12.3c-2-3.2-5.5-5.1-8.2-7.6
c-12.4-11.8-5.8-32.2,0.2-48.3c9.1-24.3,14.5-52.9,1.5-75.4c-11.3-19.4-33.7-29.5-55.6-34.4c-21.9-4.9-44.7-5.9-66-13
c-14.9-5-28.6-12.9-43.3-18.2s-31.4-8-45.9-2.2c-14.1,5.6-27.3,18.9-41.9,14.8c-4-3.4-8.8-8.7-9.2-15.5
c-1.2-19.9,36.8-28.6,37.1-50.2c0.2-11.1-9.9-21.7-19.4-25.1c-2.4-0.9-7.4-2.2-32.6,6.4c-21.9,7.5-33.2,11.3-46.7,20.8
c-10.9,7.6-10.3,9.9-15.9,11.4c-14.3,3.8-24.7-8.9-47-20.9c-15.2-8.2-33.7-18.2-55.6-17.5c-26.4,0.8-35,16.5-60.3,11.7
c-7.1-1.3-16.7-3.2-23.5-11c-10.4-12-2.8-24.8-9.4-50.9c-1.6-6.2-5.6-21.5-16.4-35.2c-14.4-18.1-34.5-25.4-47.7-28.6"/>
</g>
<g >
<path class="fluss" id="Kirnitzsch" d="M1475.4,500.2c-3.4-12.9-13-24-25.2-29.3c-7.1-3.1-15.9-5.2-18.9-12.3c-1.8-4.5-0.6-9.6,0.7-14.2
c-6-1-12.4,0.8-17,4.8c-1.1-4.3-6.8-4.8-11.1-5.9c-9.2-2.3-15.5-10.6-23-16.4c-1.1-0.9-2.3-1.7-3.7-2c-1.8-0.4-3.6,0.2-5.4,0.8
c-8.6,2.7-17.8,4.5-26.6,2.7s-17.1-8.2-19.2-16.9c-0.5-2.3-0.7-4.8-2.2-6.6c-3.2-3.9-9.8-1.6-13.2,2.2c-3.4,3.8-5.6,8.9-10.2,11.2
c-1.7,0.9-3.5,1.3-5.2,2.1c-2.2,1.1-4,2.8-5.9,4.3c-8.9,6.7-20.7,7.6-31.7,8.2c-2.1,0.1-4.7,0-5.6-1.9c-0.6-1.2-0.2-2.7-0.8-4
c-0.6-1.3-2.2-1.8-3.6-2.1c-8.7-1.9-17.8-0.7-26.6,0.5c-2.3,0.3-4.7,0.6-6.7,1.8c-3,1.7-4.8,5-7.5,7.2c-8.4,6.8-21.5,1.2-31.5,5.3
c-5.8,2.4-12.3,8.8-16.1,26"/>
</g>
<g >
<path class="fluss" id="Sebnitz_fl" d="M1438.9,330c-18.2,10.6-34.1,13.2-42.9,13.9c-12.3,1-22.8-0.6-31.3-1.9c-9.7-1.5-14.5-2.2-20.3-4.9
c-5.9-2.7-7.5-4.9-13.3-6c-4.2-0.8-6.9-0.3-11.6-2.3c-2.2-0.9-3.1-1.6-5.7-2.5c-2.7-0.9-5.5-1.2-8.3-1.3c-9.8-0.4-19.4,1.9-29,4.2
c-4.7,1.1-9.6,2.3-13.5,5.2c-3.9,2.9-6.8,7.8-5.6,12.6c0.6,2.5,2.2,4.9,1.5,7.3c-1.2,4-6.8,3.7-10.8,5.1c-5.7,2-8.5,8.2-11.2,13.6
c-2.7,5.4-7.1,11.2-13.1,10.9c-4.2-0.2-8.6-3.4-12.3-1.3c-1.8,1-2.7,3-4.1,4.5c-2.1,2.1-4.5,1.6-11.6,2.2c-2,0.2-4.9,0.5-8.5,1
c-2.3,6.1-5.4,8.5-7.7,9.5c-5.7,2.6-10.9-1.5-18.3,2.5c-1.8,1-3.3,2.6-5.2,3.3c-7.7,2.9-14.1-9.7-22.2-8.3c-2.8,0.5-5,2.7-6.6,5
c-6.2,8.8-6.5,19.6-5.4,37c0.3,4.8,0.7,8.7,1,11.3"/>
</g>
<g >
<path class="fluss" id="Wesenitz" d="M1034.5,50.4c0.2,6.5-8.3,9.5-11.2,15.3c-2.9,5.7,0.4,12.8-1,19c-0.8,3.5-2.9,6.4-4.4,9.6
c-2.9,6.6-2.6,14.4,0.7,20.8c-6.6,1.5-11.4,8.7-10.4,15.4c-4.9-3.4-12.1,1-13.8,6.7s0.3,11.8,2.3,17.4c1.4,3.8,2.8,8.1,1.3,11.9
c-3.9,9.8-19.9,5-28.1,11.6c-1.1,0.9-2.1,2-3.4,2.6c-4.6,2-10.3-3.9-14.6-1.3c0,3-0.6,6.3-2.7,8.4c-2.1,2.1-6.1,2.5-8,0.2
c-2.1-2.6-0.6-6.5-1.9-9.5c-0.9-2.1-2.9-3.4-4.9-4.3c-13.5-6.5-31.3-2.1-40.4,9.8s-8.5,30.2,1.2,41.6c6,7.1,15.6,13,15.7,22.3
c0.1,4.9-2.6,9.3-5.2,13.4c5.1,1.8,10.4,3.7,14.3,7.6c3.8,3.9,5.6,10.3,2.6,14.8c-2.2,3.3-6.2,4.7-9.6,6.5s-6.9,5.1-6.4,9
c-5,3.1-10.1-3.9-15.7-5.6c-3.5-1.1-7.3,0-11,0.1c-6.5,0.2-12.6-2.9-18.9-4.2c-6.4-1.3-14.2-0.1-17.2,5.6
c-3.1,6.1,0.2,15.6-5.7,19.1c-3.8,2.3-9,0-13.1,1.6c-4.9,1.9-6.1,8.1-7.8,13.1c-1.7,5-4.5,9.6-7.2,14.1c-2.5,4-5.1,8.2-9.1,10.6
c-4.1,2.4-10,2.3-12.9-1.4c-2.7,6.1-8.5,10.2-14.1,13.9c-3.5,2.3-8.3,4.6-11.4,1.9c-1,2.4-1.9,4.8-2.9,7.2"/>
</g>
<g >
<path class="fluss" id="Gottleuba" d="M803.9,788.1c-1.8-3.1-0.3-7.1,2.1-9.8c2.4-2.7,5.5-4.6,7.7-7.3c8.2-10.1,1.2-26,6.5-37.9
c3.2-7.1,10.9-14.2,7.3-21.2c3.7-4.6,7.5-9.3,11.2-13.9c1.2-1.5,2.5-3.1,2.9-5c1.4-6.4-7.1-12.8-4-18.6c5.2-0.5,11.8-3.9,10.4-8.9
c-0.7-2.5-3.3-3.9-5.1-5.9s-2.4-5.7,0-6.7c4.3,1.7,9.3-1.3,11.4-5.4s2-8.9,1.9-13.5c-0.3-9.3-0.5-18.6-0.8-27.9
c-0.1-4-0.2-8.1,1.1-11.9c4.2-12.2,19.5-15.2,31.3-20.5c18.6-8.4,32-27.4,33.5-47.8c0.4-4.9-0.1-10.3-3.7-13.7
c-2.9-2.7-7.2-3.3-10.9-4.9c-3.6-1.7-6.9-5.9-5.1-9.4c-4.9-3.7-6.8-10.8-4.5-16.4c-6.5-0.9-13.2-0.6-19.6,0.9
c-0.9-5.5-6.6-8.5-11.1-11.8c-4.5-3.3-8.4-9.8-4.8-14c-5.2,0.2-9.7-3.8-12.1-8.4s-3.2-9.9-4.8-14.8c-4-12.4-9-15.9-17.2-30.3
c-3.9-6.9-8.8-17.5-11.6-32.4"/>
</g>
<g >
<path class="fluss" id="Müglitz" d="M769.3,937.9c3.3-9.7,0.4-21.2-7.2-28c-4.4-4-10.1-6.4-13.9-11c-11.1-13.4-1.8-39.5-17.4-47.2
c-2.5-1.2-5.3-1.7-7.7-3.2c-3.8-2.4-5.6-6.8-7.8-10.8c-4.9-9.1-12.6-16.7-21.7-21.5c-6.2-0.6-12.5-1.1-18.7-1.7
c4-8.9,1-20.5-6.8-26.4c-3-2.2-6.7-3.9-8.2-7.3c-2.5-5.7,2.5-13.8-2.1-18.1c-2.3-2.2-6-1.9-9-2.7c-8-2.2-11.4-11.4-16.8-17.7
c-5.8-6.7-14.3-10.3-21.2-15.9c-6.9-5.5-12.4-15-8.7-23c-3.4-0.5-6.7-0.9-10.1-1.4c1.4-4.5,2.7-9,4.1-13.5
c-5.6-0.7-10.8-3.4-14.5-7.7c5.1-2.1,10.8-2.7,16.3-1.8c0.2-6.9,5.1-13.3,11.7-15.3c2.9-0.8,6.1-1,8.2-3.1c2.2-2.2,2.3-5.9,4.3-8.3
c2.1-2.6,5.7-3.1,8.9-4.2c12.2-3.9,20.4-17.4,18.3-30c2.3-4,5.2-10.3,5.8-18.4c0.6-8.1-1.8-8.7-2.2-20.1
c-0.4-12.8,2.4-18.4-1.9-23.3c-1.8-2.1-4.4-3.3-6-5.6c-2.5-3.6-1.6-8.5-0.4-12.8c3.6-13.3,8.1-26.5,13.3-39.3
c7.5-1.4,13.4-8.8,13.1-16.4c6.5-0.1,12.6-5.1,13.9-11.5c0.6-3,0.4-6.4,2.5-8.7c4.1-4.5,12.1,0.3,17.5-2.4c3.2-1.6,4.6-5.3,5.7-8.7
c3.4-11.2,5.2-22.9,5.3-34.7c0-1.4,0-3-0.9-4.2c-1.4-1.8-4-1.7-6.2-2.1c-8.8-1.8-11.5-13.5-9.4-22.3c2.1-8.8,7.1-17.1,6.5-26.1
c-0.3-3.9-1.4-8.3,1.1-11.3c4.2,4.6,11.9,2.9,17.5,0c6.8-3.5,13.6-3.4,17.6-5.3"/>
</g>
<g >
<path class="fluss" id="rote_Weißeritz" d="M458.7,566.9c-1.2-5.3-7.7-7.2-13.1-7.3s-11.4,0.7-15.6-2.7c-6.1-4.9-4.3-14.4-3.6-22.2
c0.1-1.4,0.2-2.9-0.3-4.3c-1.1-3.4-4.9-5-7.8-6.9c-8.3-5.5-11.9-16.1-12.2-26.1c-0.3-10,2.1-19.8,3.2-29.7
c-5.6-3.2-11.3-6.4-15.9-10.9c-4.6-4.5-8.1-10.6-8.2-17c-0.1-5.3,1.7-11.7-2.4-15.1c-3.7-3.1-9.9-1-13.7-3.9
c-3.3-2.6-3.3-7.5-3.6-11.6s-2.5-9.3-6.7-9.2c-5.1,0-7.3,7.6-12.3,8.3c-3.4,0.5-6.5-2.7-6.9-6.1c-0.4-3.4,1.2-6.7,3.3-9.4
c0.9-1.2,2-2.3,2.6-3.7c0.9-1.9,0.8-4.1,0.7-6.2c-0.2-5.2-0.3-10.5-0.5-15.7c0-1-0.1-2.1,0.4-3.1c0.5-1.1,1.6-1.8,2.6-2.5
c3.9-2.5,7.8-5.1,11.8-7.6"/>
</g>
<g >
<path class="fluss" id="wilde_Weißeritz" d="M423,852.4c-15.9-6.2-32.3-12.7-44.4-24.8c-7.9-7.9-13.5-17.8-17.1-28.4c-1.6-4.8-2.8-9.8-5.6-14
c-4.6-6.9-12.7-10.7-17.8-17.3c-4.6-6.1-6.2-14.4-4.1-21.7c0.9-3,2.3-5.8,2.7-8.9c1.1-7.8-4.3-14.8-8.6-21.3
c-4.3-6.6-7.6-15.6-2.9-21.9c-7.2,1.1-14-7.4-11.2-14.1c1.4-3.5,4.8-7.3,2.9-10.6c-1.1-1.9-3.6-2.5-4.8-4.3c-1.4-2-0.7-4.7-0.6-7.2
c1-16.9-23.4-26.3-23.8-43.2c-4.1,0.4-7.8-3.1-9.1-7c-1.3-3.9-0.7-8.2-0.1-12.3c-7.6,1.5-14.3-5.3-17.9-12.1s-6.2-14.8-12.5-19.2
c-3.5-2.5-7.9-3.5-11.4-6c-3.5-2.5-6-7.5-3.7-11.1c-4.3-1-8.1-3.9-10.3-7.7c1.7-4.6,6.8-7.6,11.7-6.9c-0.7-3.8-1.4-7.6-2.1-11.5
c6.7-1.8,10.7-10.2,7.8-16.5c4.7-0.1,8.9,2.8,13.4,3.9c7.4,1.9,15.9-1.4,20.1-7.7c4.2-6.4,4-15.4-0.6-21.6
c-2.7-3.5-6.8-7.6-4.7-11.5c1.3-2.5,4.6-3.1,6.4-5.3c3.1-4-0.1-10.7,3.3-14.4c3.7-4,12.9-1.8,13.5-7.2c0.2-1.9-1-3.5-2-5.1
c-6.7-10.6-6.8-24-6.7-36.6c0.1-13.4,0.3-26.8,0.4-40.3c13.3,0.5,27-7,39.4-2.2c1,0.4,1.9,0.8,2.9,1.3c4.5,2.3,7.7,4,8.1,4.2
c2.7,1.5,9.3,0.9,26.6-7.9"/>
</g>
<g >
<path class="fluss" id="vereinigte_Weißeritz" d="M360.5,353.9c3-8,6.8-11.1,9.8-12.3c2.5-1,4-0.9,6.2-2.5c3.1-2.3,3.7-6.6,4-10.5c0.5-5.5,1.4-11.4,5.2-15.5
c1.3-1.4,3-2.6,4-4.3c1.5-2.7,0.9-6,1.4-9c1.3-7.1,8.9-13.6,5.8-20.1c4.5-1.2,9.4-2.6,12-6.5c1.1-1.6,1.7-3.5,3.1-4.7
c2.4-2.1,5.3-1.7,7.8-1.9c3.2-0.2,7.6-1.2,13-4.8"/>
</g>
<g >
<circle class="stadt" id="Heidenau" cx="710.7" cy="338" r="9.2"/>
</g>
<g >
<circle class="stadt" id="Bad_Schandau" cx="1182.9" cy="457" r="9.2"/>
</g>
<g >
<circle class="stadt" id="Königstein" cx="1052.8" cy="469.9" r="9.2"/>
</g>
<g >
<circle class="stadt kreisstadt" id="Sebnitz_st" cx="1333.7" cy="317.2" r="9.2"/>
</g>
<g >
<circle class="stadt" id="Neustadt" cx="1222.6" cy="187.8" r="9.2"/>
</g>
<g >
<circle class="stadt" id="Stolpen" cx="1025.3" cy="147.9" r="9.2"/>
</g>
<g >
<circle class="stadt" id="Bad_Gottleuba-Berggießhübel" cx="856.3" cy="632.3" r="9.2"/>
</g>
<g >
<circle class="stadt kreisstadt" id="Dippoldiswalde" cx="427.5" cy="570.1" r="9.2"/>
</g>
<g >
<circle class="stadt" id="Glashütte" cx="604.3" cy="655" r="9.2"/>
</g>
<g >
<circle class="stadt kreisstadt" id="Freital" cx="374.3" cy="307.9" r="9.2"/>
</g>
<g >
<circle class="stadt" id="Altenberg" cx="590.6" cy="865.8" r="9.2"/>
</g>
<g >
<circle class="stadt" id="Geising" cx="650.5" cy="884.3" r="9.2"/>
</g>
<g >
<circle class="stadt" id="Wilsdruff" cx="199" cy="197" r="9.2"/>
</g>
</svg>
<input type="checkbox" name="Inhalte" id="contentNachbarn" checked>
<label for="contentNachbarn">Nachbarn</label>
<input type="checkbox" name="Inhalte" id="contentFlüsse" checked>
<label for="contentFlüsse">Flüsse</label>
<input type="checkbox" name="Inhalte" id="contentStädte" checked>
<label for="contentStädte">Städte</label><br>
<button id="startLernen">Los geht's</button>
<p id="question"></p>
<div id="feedbackBox">
<p id="feedback"></p>
<p id="counters"></p>
<button id="weiterLernen">Weiter!</button>
<button id="schließenLernen">Schließen!</button>
</div>
</div>
</body>
<script src="zeigen.js"></script>
</html>