Tietovisa-peli

Skip to content

Tämä on konekäännetty teksti, joka saattaa sisältää virheitä!

Vanskelighetsgrad: Hard

Tässä tehtävässä luot visailupelin verkkosivulle!

Pelin tulee esittää kysymyksiä, joissa on useita vastausvaihtoehtoja. Kun käyttäjä valitsee vastauksen, verkkosivun tulee näyttää, oliko vastaus oikein vai väärin, ja siirtyä sitten seuraavaan kysymykseen.

Vähän siitä, miten tämä pitää tehdä

Dictionaries

Jotta JavaScript-kysymyksistä voidaan pitää kirjaa, tarvitaan “Dictionary”. Voit lukea lisää dictionaries-rakenteista täältä w3schools.

Dictionary on datarakenne (Wikipedia), joka voi sisältää erilaisia elementtejä.

Start-koodi kysymyksille 
const questions = [
    {
        question: "Mikä on Norjan pääkaupunki?",
        answers: ["Bergen", "Oslo", "Trondheim", "Stavanger"],
        correctIndex: 1, // indeksi alkaa 0:sta JavaScriptissä    
    },
    {
        question: "Kuinka korkea on Mt. Everest?",
        answers: ["2469m", "9330m", "8848m", "5895m"],
        correctIndex: 2,    
    },
    {
        // seuraava kysymys
    },
    // lisää kysymyksiä alaspäin...
];

Tällä koodilla voit hakea arvoja kirjoittamalla:

let currentQuestion = questions[0].question;

[0], tarkoittaa siis, että haet ensimmäisen elementin, eli ensimmäisen kysymyksen.

Käytä muuttujaa, jotta pysyt kärryillä siitä, missä kysymyksessä olemme.

Asioita, jotka sinun tulee ottaa mukaan:

  • ✅ Varmista, että tietovisassa on vähintään 5 kysymystä.

HTML/CSS
  • 1️⃣ Yksinkertainen sivu, jossa on yksi nappi pelin aloittamiseksi.
  • 🧑‍💻 Kun tätä nappia painetaan, käytä JavaScriptiä pelin muun osan asettamiseen DOM-manipulaation avulla. Lue ja opi DOM:sta täältä DOM w3schools.
  • ✅ Aseta peli mielellään näin:
    • Kysymys näkyy yläosassa <div>-elementissä, anna sille id.
    • Neljä painiketta, joita voi painaa, yksi jokaiselle vastausvaihtoehdolle.
    • Kun oikean vastauksen painiketta painetaan, käytä alert()-ponnahdusikkunaa kertoaksesi, oliko vastaus OIKEIN tai VÄÄRIN. Siirry sitten seuraavaan kysymykseen.
  • 🎨 Tyylittely on vapaaehtoista, mutta olisi kiva saada peli näyttämään hieman hienolta!

JavaScript:
  • ❓ Muuttujat, joilla pidät kirjaa:
    • Minkä kysymyksen parissa olet.
    • Kuinka monta oikeaa vastausta olet saanut.
  • 2️⃣ Kaksi funktiota
    • Toista käytetään pelin aloittamiseen: startGame() esimerkiksi.
    • Toista käytetään vastauksen tarkistamiseen: checkAnswer(option) (käytetään painikkeissa).
  • ☝️ Lyhyesti logiikasta:
    • Kun painat “aloita”, käytä “DOM-manipulaatiota” luodaksesi painikkeet, joita pelissä käytetään (lue DOM).
      • Muista myös tyhjentää kysymys-<div>-elementti ennen kuin lisäät siihen mitään!
    • checkAnswer funktio on suurimman osan toiminnallisuudesta takana, tässä tarkistat onko vastaus oikein vertaamalla painamasi indeksin oikean vastauksen indeksiin ja lisäämällä sen jälkeen pistemäärää sen perusteella.

Flere functions?:
  • 😎 Käytä mielellään useampaa kuin kahta funktiota koodisi hallittavuuden parantamiseksi. Tässä muutamia ideoita:
    • Funktio, joka kasvattaa pistemäärää
    • Funktio, joka tarkistaa, onko peli päättynyt
    • Funktio, joka lopettaa pelin

Ekstra utfordringer: Hard

  • Muuta alert()-funktio käyttämään “info-kenttää”, jota JavaScript-koodisi muokkaa. Voit kokeilla paljon erilaisia tyylejä.
  • Lisää “Edistymispalkki”, joka näyttää kuinka pitkälle olet päässyt tietovisassa.
  • Lisää mahdollisuus, että tietovisaan on enemmän tai vähemmän kuin 4 vastausvaihtoehtoa. (Vihje! Käytä for-silmukkaa.)
  • Lisää kenttä, joka näyttää tietovisan “High scoren”. Tallenna tämä mielellään “localstorageen”.

Lisähaasteita: Cracked

  • Lisää mahdollisuus käyttäjälle lisätä kysymyksiä tietovisaan tai luoda oma “tietovisa”.