Heips, yritän tässä pyöritellä tutoriaaliscriptille jatkoa..
mikä olisi järkevin tapa tässä tarkistaa kysymyksen vastaus? Nykyinen tapa ei toimi (toki oheisessa koodissa testailen vain yhdellä napilla, mutta kuitenkin). Muutenkin tuntuu, että jokin parempi tapa olisi tehdä tämä, koska askQuestion() funktion kutsuminen sekä answerHandler():ssä, että sitä ylempänä, on jotenkin tönkeä purkkaratkaisu... kai?
Eli kysymysobjektit arvotaan listasta ja vastausnappien keskinäinen järjestyskin sekoittuu satunnaisesti, joka hankaloittaa omia aivonystyröitä keksimään miksi vastauksen händlääminen ei toimikaan niin yksinkertasesti kun ajattelin, tai siis varmasti toimiikin, kun vain keksisi sen :) oikeaan vastaukseen saa viitattua kyllä, mutta vastausnappi tuottaa ongelmia.
E: html puolella siis buttoneissa on onclick kutsu answerHandler funktioon.
// kentät kysymykselle ja vastauskommentille
const questionLabel = document.getElementById("questionText");
const answerLabel = document.getElementById("answer");
// vastausnapit
const button1 = document.getElementById("nappi1");
const button2 = document.getElementById("nappi2");
const button3 = document.getElementById("nappi3");
const button4 = document.getElementById("nappi4");
var questions = [{
question: "Onko tämä hyvä kysymys",
rightAnswer: "Kyllä",
wrongs: ["Ehkä", "Ei", "En tiedä"]},
{
question: "Tulisiko tämä ongelma ratkaista itse ilman apuja?",
rightAnswer: "Kyllä",
wrongs: ["Ehkä", "Ei", "En tiedä"]}
];
// arvottu kysymys
var currentQuestion;
function askQuestion(){
// arvotaan kysymys
var randomIndex = Math.floor(Math.random() * questions.length);
currentQuestion = questions[randomIndex];
// sekoitetaan vastausnappien järjestys
var buttons = shuffle([button1, button2, button3, button4]);
buttons[0].innerHTML = currentQuestion.rightAnswer;
buttons[1].innerHTML = currentQuestion.wrongs[0];
buttons[2].innerHTML = currentQuestion.wrongs[1];
buttons[3].innerHTML = currentQuestion.wrongs[2];
questionLabel.innerHTML = currentQuestion.question;
}
askQuestion();
function answerHandler(){
//MITÄ TÄHÄN???----->
document.getElementById('nappi1').onclick = function() {
if (button1 == currentQuestion.rightAnswer) {
console.log("oikein");
} else {console.log("väärin");}
}
// sama muille napeille
//<------??????
askQuestion();
}Täällä jälleen kerran overkill vastauksellani:
Nappasin mukaan JQueryn ja tein tällaisen. Kääräsin kysymyksen luokaksi, jolla on tarkistusmetodi.
Kiitos vastauksista. Joitain mulle kummallisia syntakseja ja juttuja mitä en muista ja tiedä. Menee tovi pureskellessa ja googlatessa :)
Hienosta koodeista voi ottaa mallia tulevaisuudessa. Suoraan alkuperäisen koodin muutoksena voisit vain laittaa funktiossa askQuestion joka napille valuen, väärille "" ja oikealle "1". Sitten voisit laittaa kaikille yhteisen onclick-funktion:
function nappiOnClick() {
const oikein = (this.value == "1");
console.log(oikein ? "Oikein!" : "Väärin.");
}
button1.onclick = button2.onclick = nappiOnClick;Noniin kiitos,
sulta vähän salaa toivoinkin vastausta :D
Aihe on jo aika vanha, joten et voi enää vastata siihen.