Quiz App

UI/UX

Functional Requirements

progress indicator multiple choice

Non Functional Requirements

• Customizable

Technical Requirements

• Tailwind CSS
• JSON to store questions, no database needed
• Javascript and perhaps Vue (CDN). Could use vanilla JavaScript as well

Schema

Question topic question possible_answers correct_answer

Business Rules

• when you get to the last question, you should go back to the first question
• if you get the answer right, you can still go to the next question, but you will be notified that you are wrong.
• at the end, you will see your total correct answers.
• if we want high score, we will need to store data but perhaps it can be stored in browser local storage.

Pseudocode

handleQuestions()
    progress_element = ""
    for all questions
        progress += "<span></span>"
    spans = getAllSpans()
    spans.each{ span.addClass('seen') }

    question_element = topics + question

    answer_element = ""
    possible_answers_for_question.each { answer_container += answer}

    answers.each { 
        when clicked 
        if answer is correct answer
            log correct
        else
            log wrong
        if current question is equal to last question
            set current question to ZERO
        otherwise:
            increment current questions
        handleQuestions()
    }
handleQuestions()

Resources

• https://www.youtube.com/watch?v=_FnFPmA87XU
• https://github.com/treehouse/quiz-app/blob/main/app.js