Vragen Component

Hier word de code uitgelegd over de vragen component. Elke file in de text-cloud directory word hierin beschreven. De files worden op chronologische volgorde beschreven aan de hand van de importance.

questions.json

Wellicht is dit de belangrijkste onderdeel van de Vragen component. In de rootvan het project dien je een questions.json aan te maken. Alle categorieën en vragen worden gegeneerd aan de hand van deze JSON file. De JSON file moet volgende propertie's hebben:

{
      "type": "javascript",
      "question": "Javascript Vraag 1",
      "options": [
         "A J1",
         "B J1",
         "C J1"
      ],
      "answer": 1,
      "point": 2
}

• type[String]: De categorieën vragen worden gemaakt aan de hand van de type property. Alle vragen die deze type hebben worden vervolgens in deze categorie container gestopt.
• **question[String]:**De vraag van het object
• options[Array[String]]: De mogelijke antwoorden van de vraag
• answer[Number]: Juiste antwoord in Array index. Dus als de eerste option correct is dan vul je hier 0 in
• point[Number]: Hoeveel punten krijg je voor deze vraag

index.js

Hier begint de script van de vragen component. Zoals je kan zien worden alle modules hierin geladen. Het eerste wat er gebeurt is de questions.json ophalen aan de hand van de fetch command.

import {GlobalState} from './partials/GlobalState.js'
import { CategoriesMenu } from './partials/CategoriesMenu.js'
import { getUniqueTypes } from './partials/utils/getUniqueTypes.js'
import { CategoryContainer } from './partials/CategoryContainer.js'

fetch('./questions.json')
   .then(res=>res.json())
   .then(data=>{
      const global_state = new GlobalState(data)
      const questions = getUniqueTypes(data)
         .map(x=>{
            const questions = data.filter(y=>y.type === x)
            return {
               type:x,
               questions
            }
         })
         .map(type => 
            new CategoryContainer(type, global_state)
         )
      new CategoriesMenu(data, questions, global_state)
      
   })

Na het ophalen van de vragen worden er 3 belangrijke classes aangeroepen GlobalState, CategoryContainer, en de CategoriesMenu.

GlobalState: Dit is de Globale State van de vragen component. Hier wordt de score bijgehouden en welke CategoryContainer of Menu op dit moment active is.

CategoryContainer: Dit zijn alle Category Containers die worden geladen aan de hand van de type property uit de questions.json. Alle vragen met desbetreffende type worden in deze container gestopt.

CategoriesMenu: Alle unieke types uit de questions.json worden hier gegeneerd, zodat de gebruiker een keuze kunt maken welke soort vragen hij/zij wilt beantwoorden.

GlobalState

Zoals hierboven werd beschreven. Hier wordt het huidige state van de component bijgehouden(welke scherm is active en de score)

export class GlobalState {
   constructor(questions){
      this.max_points = questions.reduce((acc, curr)=>acc + curr.point,0)
      this.wrong_answers = 0
      this.correct_answers = 0
      this.points = 0
      this.category_selected = false
      this.init()
   }
   correct(points){
      this.correct_answers++
      this.points = this.points + points
      console.log(this)
   }
   wrong(){
      console.log(this)
      this.wrong_answers++
   }
   setVisibleContainer(){
      const categories = document.querySelector('.cloud .categories')
      const questions = document.querySelectorAll('.cloud .question')
      const header = document.querySelector('.cloud header')

      questions.forEach(question =>{
         if(!question.classList.contains('hidden')){
            question.classList.add('hidden')
         }
      })
      header.querySelectorAll('h1').forEach(h1 =>{
         if(!h1.classList.contains('hidden')){
            h1.classList.add('hidden')
         }
      })
      if(!categories.classList.contains('hidden')){
         categories.classList.add('hidden')
      }
      
      if(this.category_selected){
         const category = header.querySelector('.category')
         this.category_selected.showQuestion()
         category.querySelector('span').textContent = this.category_selected.type
         category.classList.remove('hidden')
      }else{
         const all_categories = header.querySelector('.all_categories')
         all_categories.classList.remove('hidden')
         categories.classList.remove('hidden')
      }
   }
   init(){
      const headerBackBtn = document.querySelector('.cloud header h1.category button')
      headerBackBtn.addEventListener('click', ()=>{
         this.category_selected = false
         this.setVisibleContainer()
      })
   }
}

• correct: Wanneer een gebruiker de vraag correct beantwoord, word deze methode aangroepen
• wrong: Wanneer een gebruiker de vraag incorrect beantwoord, word deze methode aangroepen
• setVisibleContainer: De juiste scherm (div elementen) weergeven aan de gebruiker. Deze methode wordt aangeroepen als de gebruiker op terug klikt of naar de volgende vraag gaat of een keuze maakt uit de categorieën menu.
• init: Deze methode word direct aangeroepen bij het starten van deze class