Kirjautuminen

Haku

Tehtävät

Kilpailu

Algoritmikisa
Putka Open 2020 -kisan
4. kierros: 6.–8.11.

Keskustelu: Ohjelmointiongelmat: JavaScript: Tietovisakysymyksen vastauksen tarkistus

Sivu 1 / 1

Distortion3 [14.07.2020 21:41:40]

#

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();
}

noutti [15.07.2020 10:10:16]

#

Täällä jälleen kerran overkill vastauksellani:

https://codepen.io/varjodesign/pen/KKVxRRM

Teuro [15.07.2020 16:25:47]

#

Nappasin mukaan JQueryn ja tein tällaisen. Kääräsin kysymyksen luokaksi, jolla on tarkistusmetodi.

Distortion3 [15.07.2020 19:47:45]

#

Kiitos vastauksista. Joitain mulle kummallisia syntakseja ja juttuja mitä en muista ja tiedä. Menee tovi pureskellessa ja googlatessa :)

Metabolix [15.07.2020 23:36:46]

#

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;

Distortion3 [16.07.2020 00:14:19]

#

Noniin kiitos,
sulta vähän salaa toivoinkin vastausta :D

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta