Oppgave 2

Lag en nettside med minst tre spørsmål. Hvert spørsmål skal være på sin egen linje, og hver linje skal i tillegg til spørsmålet inneholde en "Sann" og en "Usann" knapp. Når du trykk er på knappene skal en meldingsboks vise "Riktig" eller "Galt" ettersom hvilken knapp man trykket på.

Resultat

Spørsmål

2 + 2 = 4
2 + 2 = 5
Hva kom først av høna og egget?

Kode

JavaScript

                
window.onload = ready;

function ready() {
    var o2Modal = document.getElementById("o2-modal");
    var o2Backdrop = document.getElementById("o2-backdrop");

    // Skjul modal og backdrop når brukeren trykker på backdrop
    o2Backdrop.onclick = function() {
        this.style.display = "none";
        o2Modal.style.display = "none";
    };

    // Finner alle spørsmålene inni en liste
    var questions = document.querySelectorAll("#o2-questions li.o2-question");

    // For hvert spørsmål, lag en eventlistener
    for (var i = 0; i < questions.length; i++) {
        questions[i].addEventListener("click", function(e) {
            if (e.target.nodeName == "BUTTON") {
                o2Modal.style.display = "block";
                o2Modal.innerHTML = e.target.dataset.answer;
                o2Backdrop.style.display = "block";

                // Skjul modal og backdrop automatisk etter 2.5 sekunder
                setTimeout(function() {
                    o2Backdrop.click();
                }, 2500);
            }
        });
    }
}

HTML

                
<ul id="o2-questions">
    <li class="o2-question">
        <code class="language-javascript">2 + 2 = 4</code>
        <button data-answer="Riktig!" class="btn success">Sant</button>
        <button data-answer="Feil" class="btn alert">Usant</button>
        <span class="o2-status"></span>
    </li>
    <li class="o2-question">
        <code class="language-javascript">2 + 2 = 5</code>
        <button data-answer="Feil" class="btn success">Sant</button>
        <button data-answer="Riktig!" class="btn alert">Usant</button>
        <span class="o2-status"></span>
    </li>
    <li class="o2-question">
        <code class="language-javascript">Hva kom først av høna og egget?</code>
        <button data-answer="Hvem vet?" class="btn black">Høna</button>
        <button data-answer="Vi vet ikke svaret, beklager" class="btn black">Egget</button>
        <span class="o2-status"></span>
    </li>
</ul>
<div id="o2-modal">Resultat</div>
<div id="o2-backdrop"></div>