Skip to content

quiz_question.mjs

Jump to bottom
Arnav edited this page Apr 22, 2024 · 12 revisions

quiz_question.mjs

Basic information

  • Web Componenet
  • Will be used by the quiz_manager.mjs to display questions to the user (quiz_manager.mjs not created yet)

constructor()

    constructor() {
        super();
        this.shadow = this.attachShadow({ mode: 'open'});
        this.addStyle();
        this.question;
        this.options = [];
        this.qustionAnswer;
        this.setOptions = this.setOptions.bind(this);
        this.createInPage = this.createInPage.bind(this);
        this.setQuestion = this.setQuestion.bind(this);
        this.submit = this.submit.bind(this);
        this.setAnswer = this.setAnswer.bind(this);
        this.create = this.create.bind(this);
        this.addStyle = this.addStyle.bind(this);
    }
    }
  • Creates important variables for use later.
  • binds functions to web component

connectedCallback()

        connectedCallback() {
        this.correctEvent = new CustomEvent("response", {
            detail: {
                name: "correct",
            },
        });

        this.incorrectEvent = new CustomEvent("response", {
            detail: {
                name: "incorrect",
            },
        });
    }
  • On creation of the web component a shadowDom is attached and all styling is added.

addStyle()

    addStyle() {
        this.shadow.innerHTML += `
            <head>
                <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
                integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
            </head>
            
            <body>
                <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
                integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
                crossorigin="anonymous"></script>
            </body>

            <style>
                .hide{
                    display: none;
                }
            </style>
  • Adds all CSS and Frontend frameworks (bootstrap) to web component.
        this.addStyle();

setQuestion()

    setQuestion(_name) {
        if(this.questionHTML === undefined) {
            this.questionHTML = document.createElement('h1');
            this.questionHTML.textContent = _name;
            this.shadow.append(this.questionHTML);
            return;
        }
        this.questionHTML.textContent = _name;
    }
  • Creates HTML Element if it doesn't already exist.
  • Assigns _name (This var will be renamed) to the textContent of HTML Element.
QuizQuestion.setQuestion('What is the chemical formula for water?');

setOptions()

    //expects an array
    setOptions(_options) {
        this.options = _options;
    }
  • Takes in an array of options.
QuizQuestion.setOptions(['CO₂', 'H2O', 'CH3COOH', 'C3H6O']);

setAnswer()

    setAnswer(_ans) {
        this.qustionAnswer = _ans;

        
        // Hidden on creation
        this.correctDiv = document.createElement('div');
        this.correctDiv.classList.add(['alert'], ['alert-success'], ['hide']);
        this.correctDiv.textContent = "Correct";

        // Hidden on creation
        this.incorrectDiv = document.createElement('div');
        this.incorrectDiv.classList.add(['alert'], ['alert-danger'], ['hide']);
        this.incorrectDiv.textContent = "Incorrect. Answer: " + this.qustionAnswer;

        this.shadow.append(this.correctDiv, this.incorrectDiv);
    }
  • Takes an answer which will be used later to check the question.
  • Creates a correct/incorrect div. These are used to let the user know if they got the question correct or incorrect
  • Appends element to shadowDom
QuizQuestion.setAnswer('H2O');

createInPage()

    createInPage() {
        this.questionHTML = document.createElement('h1');
        this.questionHTML.textContent = this.question;
        this.questionHTML.classList.add('fs-1');

        this.shadow.append(this.questionHTML);

        for(let i = 0; i < this.options.length; i++){
            const btn = document.createElement('button');
            btn.textContent = this.options[i];
            btn.classList.add(['btn'], ['btn-primary'], ['m-2']);
            btn.addEventListener('click', this.submit);
            this.shadow.append(btn);
        }
    }
  • Creates a h1 to hold the question (setQuestion does this aswell however depending on order of code will decide which one acutally creates the element)
  • Adds bootstrap fontsize 1
  • Appends question h1 to page
  • for loop creates a button for each option. styles each button and adds event listener to submit function
QuizQuestion.createInPage();

submit()

    submit(e) {
        console.log("User Ans: " + e.target.textContent);
        console.log("Ans: " + this.qustionAnswer);
        
        if(e.target.textContent === this.qustionAnswer) {
            this.dispatchEvent(this.correctEvent);
            // Makes sure incorrect and correct arent displaying at same time
            if(!this.incorrectDiv.classList.contains('hide')){
                this.incorrectDiv.classList.add('hide');
            }
            this.correctDiv.classList.remove('hide');
            return;
        }
        this.dispatchEvent(this.incorrectEvent);
        // Makes sure incorrect and correct arent displaying at same time
        if(!this.correctDiv.classList.contains('hide')){
            this.correctDiv.classList.add('hide');
        }
        this.incorrectDiv.classList.remove('hide');
    }
  • Checks if the button textContent is === the question answer.
  • If the button textContent === question answer it displays correctDiv.
  • If the button textContent !== question answer it displays incorrectDiv.

create()

    create(_question, _options,  _answer) {
        this.setAnswer(_answer);
        this.setOptions(_options);
        this.setQuestion(_question);
        this.createInPage();
    }
  • This function is used to create the element only using one function call
  • ensures functions are called in correct order
Question.create(question, ['option 1', 'option 2'], questionAnswer);

learnforge wiki!

Clone this wiki locally