Coders Packet

Alpha Quiz System using HTML, CSS and JavaScript

By Shuvranil Mondal

Alpha quiz system is a quiz-based game. similar to different online-based exam virtual environments with proper timer and submit button, using HTML, CSS and JavaScript.

Through this project, we will learn how to render HTML dynamically by using JavaScript. This project is similar to different virtual-based exams or quiz games, report card will be generated automatically after the given time expires or after answering all the questions. Let see how to make this project.

Follow the steps below:

- First we need to create three section inside our HTML body tag. First section is for home page, Second section is for our main question            answer part & the last section is for our report card part.

- Now we have to display hide for all the sections except, section one which is our home page. #b2,#b3{ display: none; }

- Whenever user clicks the "Submit" button, section one's display will be hidden and section two's display will be shown. In this case, we        are triggering a perticular function in javascript. Now the same process will continue until our report card will be generated.

let b1Btn = document.getElementById('sub-btn');


b1Btn.addEventListener('click',()=>{
    b1.style.display = 'none';
    b2.style.display = 'grid';
});

- Now the main part is how to structure our questions in our js code, see there are many ways to store your data in js code, we can use API    or simple object formatting. You can store multiple questions and their answers in this way.

let ques = [
    {
        question: 'Q1: What is the full form of HTML?',
        a: 'Hello To My Land',
        b: 'Hay text markup language',
        c: 'Hypertext markup language',
        d: 'hype text markup language',
        ans: 'ans3'
    },
    {
        question: 'Q2: What is the full form of CSS?',
        a: 'cascading style sheets',
        b: 'cascading select sheets',
        c: 'cad style sheets',
        d: 'cascadind style shield',
        ans: 'ans1'
    },
   
]

- Now we have to check whether the answer given by user is correct or wrong?

let answar = document.querySelectorAll('.answer');
let getAns =()=>{ let correctAns; answar.forEach((element)=>{ if(element.checked){ correctAns = element.id; } }); return correctAns; };

-After submitting all the questions we have to generate the scorecard of our user.

score = 0
count = 0

let userReport=()=>{
    let passFail = document.getElementById('pass-fail');
    let marks = document.getElementById('marks');
    let persent = document.getElementById('persent');
    marks.innerHTML =`your score is = ${score}/${ques.length}`
    persent.innerHTML = `your percentage is = ${(score/ques.length)*100}%`
    b2.style.display = 'none';
    b3.style.display = 'grid';
    if(score > 2){
        passFail.innerHTML = `congratulations you are qualified !!`
    }
    else{
        passFail.innerHTML = `sorry you are not qualified !!`
        passFail.style.color = 'red'
    }
}


btn2.addEventListener('click',()=>{
    let check = getAns();
    if(check===ques[count].ans){
        score++
    }
    count++
    if(count < ques.length){
        loadQ();
    }else{
        userReport();
        clearTimeout(timeVar);
    }

});

 

 

Download project

Reviews Report

Submitted by Shuvranil Mondal (Shuvranil002)

Download packets of source code on Coders Packet