Tietovisa vierailijoille · Koodaa Martinin kanssa

Kysymykset, vastaukset ja pisteiden laskenta. Pienoiskoossa opit jokaisen pelin logiikan.

Miten se toimii

Rakennat tietovisan: kysymys, kolme vaihtoehtoa, klikkaa vastataksesi, ja pisteet näkyvät lopussa. Tietovisan data (kysymykset ja vastaukset) asuu objektien taulukossa – kuulostaa hienolta, mutta näet että se on vain siististi järjestetty lista.

Näytän sinulle: tietovisan data

const questions = [
  {
    text: "How many legs does a spider have?",
    choices: ["6", "8", "10"],
    correct: 1,
  },
  {
    text: "Which animal is the fastest?",
    choices: ["cheetah", "falcon", "hare"],
    correct: 1,
  },
  {
    text: "What's the name of our website?",
    choices: ["Code with Martin", "Code with Charlie", "Web with Wendy"],
    correct: 0,
  },
];

Taulukko [...] on lista arvoja – tunnet tämän jo (photos oli myös taulukko).
Objekti {...} on laatikko nimetyillä lokeroilla: text, choices, correct.
correct: 1 tarkoittaa: vaihtoehto numero 1 on oikein – laskenta alkaa nollasta, joten se on toinen järjestyksessä.

Näytän sinulle: tietovisan moottori

HTML:

<div class="card">
  <h2 id="quiz-question"></h2>
  <div id="quiz-choices"></div>
  <p id="quiz-status"></p>
</div>

JavaScript:

const questionEl = document.getElementById("quiz-question");
const choicesEl = document.getElementById("quiz-choices");
const statusEl = document.getElementById("quiz-status");

let questionNumber = 0;
let points = 0;

function showQuestion() {
  const question = questions[questionNumber];
  questionEl.textContent = question.text;
  choicesEl.innerHTML = "";   // clear the old buttons

  question.choices.forEach((choice, index) => {
    const button = document.createElement("button");
    button.textContent = choice;
    button.addEventListener("click", () => answer(index));
    choicesEl.appendChild(button);
  });

  statusEl.textContent = "Question " + (questionNumber + 1) + " of " + questions.length;
}

function answer(index) {
  if (index === questions[questionNumber].correct) {
    points++;
  }

  questionNumber++;

  if (questionNumber < questions.length) {
    showQuestion();
  } else {
    questionEl.textContent = "Done! 🎉";
    choicesEl.innerHTML = "";
    statusEl.textContent = "You scored " + points + " out of " + questions.length + " points.";
  }
}

showQuestion();

Uutta:

document.createElement("button") – JavaScript ei vain löydä elementtejä, vaan voi myös luoda niitä. Luomme painikkeen jokaiselle vaihtoehdolle.
appendChild(...) – lisää luodun elementin sivulle.
innerHTML = "" – tyhjennä elementin sisältö (tyhjennämme vanhat painikkeet ennen seuraavaa kysymystä).
Kaksi funktiota välittää työtä toisilleen: showQuestion() piirtää, answer() arvioi. Ohjelman jakaminen pieniin funktioihin on ammattilaisen tapa.

Nyt sinun vuorosi 💪

Rakenna tietovisa omilla kysymyksilläsi – vähintään viisi. Projekti-ideoita:

🏫 Tietovisa koulustamme – kuinka vanha koulu on? Kuka on rehtori? Montako luokkaa meillä on?
🙋 Kuinka hyvin tunnet minut? – suosikkiruokani? Kuinka vanha olen? Mikä koirani nimi on?
🌍 Matkavisa – Kroatian pääkaupunki? Maasi korkein vuori? Mihin suuntaan meri on?
⚽ Kuinka hyvin tunnet joukkueemme? – kuka on kapteeni? Montako maalia Tom teki? Mitkä ovat seuran värit?

Vaihda vain questions-taulukon sisältö – tietovisan moottori pysyy samana. Siksi data ja logiikka pidetään erillään!

Bonus: värillinen palaute vastauksille

Haluatko oikean vastauksen välähtävän vihreäksi? Säädä answer niin että se värittää painikkeet ensin, sitten näyttää seuraavan kysymyksen sekunnin kuluttua:

function answer(index) {
  const buttons = choicesEl.querySelectorAll("button");
  const correct = questions[questionNumber].correct;

  buttons[correct].style.backgroundColor = "#16a34a";
  if (index !== correct) {
    buttons[index].style.backgroundColor = "#dc2626";
  } else {
    points++;
  }

  setTimeout(() => {
    questionNumber++;
    if (questionNumber < questions.length) {
      showQuestion();
    } else {
      questionEl.textContent = "Done! 🎉";
      choicesEl.innerHTML = "";
      statusEl.textContent = "You scored " + points + " out of " + questions.length + " points.";
    }
  }, 1000);
}

setTimeout(() => {...}, 1000) tarkoittaa “aja tämä 1000 millisekunnin kuluttua.” Ja style.backgroundColor muuttaa CSS:ää suoraan JavaScriptistä.

✅

Tarkista itse: Tietovisa kysyy kysymyksiä peräkkäin, pitää kirjaa pisteistä ja näyttää tuloksen lopussa. Kirjoitit juuri ensimmäisen oikean sovelluksesi – siinä on dataa, logiikkaa ja käyttöliittymä.

Mitä opit tästä oppitunnista

Pidä data (objektien taulukko) erillään logiikasta (funktiot) – sitten uuden tietovisan saa vain vaihtamalla kysymykset.
JavaScript voi luoda elementtejä: createElement + appendChild.
setTimeout ajaa koodia viiveellä.