javascriptarraysfunctioncompare

How can I compare a clicked elements ID with another ID?


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>


Solution

  • 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>