Multiple Choice Quiz using HTML, CSS & JavaScript (Source Code)

Multiple Choice Quiz using HTML, CSS & JavaScript (Source Code)

multiple choice quiz html css code

Hello Learners, In this article we are going to design a very impressive project i.e., a Multiple Choice Quiz using HTML, CSS & JavaScript with detailed functionality.

 

Now some of you must have appeared in competitive exams like JEE, NEET, AIIMS, etc. Before it used to be pen & paper when technology was just at its beginning.

And we as students have to summarize everything from short answers to brief and write it down on paper in the given limited duration. 

100+ Front-end Projects for Web developers (Source Code)

But now the way technology is growing most of the exams are now been CBT(Computer Based Test). Not only competitive exams our unit exams of schools & colleges have been taken by this method.  

Similarly, we are going to create a Multiple Choice Quiz using HTML, CSS & JavaScript by ourselves. 

Hey Learners…! 

Today’s blog with code with random we gonna learn how we can design a Multiple Choice Quiz Using HTML, CSS & JAVASCRIPT.  

I hope you must have got an idea about the project.

As you are looking in the project preview how the thing is organized.

Following is the feature of our project:-

  • We have arranged the Questions and options in the list format using the <li> tag.
  • Then we have set the option using span and defining radio button and giving the appropriate value.
  • And in last we have defined a button with on click event and a span section to show the results.

HTML SECTION

Now I’ll be telling you to define the structure using HTML. Not from scratch, just the code which is under the body tag.

We have the following part in the HTML section:

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

  • First, we call the ul class which we have defined the class as a quiz.
  • Then using the <li> tag we have set our question in the <h4> tag.
  • Then we used a label tag and called the radio button given the value and using span we have given the answer.
  • Similarly, we have done this for all the options and for all the questions.
  • Go through the code below and run it in our IDLE before CSS Styling.
<ul class="quiz">
    <li>
        <h4>How many letters are there in "JS"?</h4>
        <ul class="choices">
            <li>
                <label
                    ><input type="radio" name="question0" value="A" /><span
                        >2</span
                    ></label
                >
            </li>
            <li>
                <label
                    ><input type="radio" name="question0" value="B" /><span
                        >1</span
                    ></label
                >
            </li>
            <li>
                <label
                    ><input type="radio" name="question0" value="C" /><span
                        >3</span
                    ></label
                >
            </li>
            <li>
                <label
                    ><input type="radio" name="question0" value="D" /><span
                        >4</span
                    ></label
                >
            </li>
        </ul>
    </li>
    <li>
        <h4>How many letters are there in "BMX"?</h4>
        <ul class="choices">
            <li>
                <label
                    ><input type="radio" name="question1" value="A" /><span
                        >2</span
                    ></label
                >
            </li>
            <li>
                <label
                    ><input type="radio" name="question1" value="B" /><span
                        >1</span
                    ></label
                >
            </li>
            <li>
                <label
                    ><input type="radio" name="question1" value="C" /><span
                        >3</span
                    ></label
                >
            </li>
            <li>
                <label
                    ><input type="radio" name="question1" value="D" /><span
                        >4</span
                    ></label
                >
            </li>
        </ul>
    </li>
    <li>
        <h4>How many letters are there in "A"?</h4>
        <ul class="choices">
            <li>
                <label
                    ><input type="radio" name="question2" value="A" /><span
                        >2</span
                    ></label
                >
            </li>
            <li>
                <label
                    ><input type="radio" name="question2" value="B" /><span
                        >1</span
                    ></label
                >
            </li>
            <li>
                <label
                    ><input type="radio" name="question2" value="C" /><span
                        >3</span
                    ></label
                >
            </li>
            <li>
                <label
                    ><input type="radio" name="question2" value="D" /><span
                        >4</span
                    ></label
                >
            </li>
        </ul>
    </li>
</ul>
<button class="view-results" onclick="returnScore()">View Results</button>
<span id="myresults" class="my-results">My results will appear here</span>

 

CSS Section: 

By CSS design we will design our whole page here it is just a quiz so we’ll just add a background color, color to the button, and font family for the whole body.

And set the padding of the questions and options so that it doesn’t get messy and looks in a systematic order.

10+ Javascript Project Ideas For Beginners( Project Source Code)

The below code of CSS 👇will help to analyze. Link this file to your link rel-tag and wait for the output.
html {
    box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
body {
    font-family: sans-serif;
    padding: 1rem;
    background-color: orange;
}
.quiz,
.choices {
    list-style-type: none;
    padding: 0;
}
.choices li {
    margin-bottom: 5px;
}
.choices label {
    display: flex;
    align-items: center;
}
.choices label,
input[type="radio"] {
    cursor: pointer;
}
input[type="radio"] {
    margin-right: 8px;
}
.view-results {
    padding: 1rem;
    cursor: pointer;
    font-size: inherit;
    color: white;
    background: teal;
    border-radius: 8px;
    margin-right: 5px;
}
.my-results {
    padding: 1rem;
    border: 1px solid goldenrod;
}

In the JavaScript section we will add a logic for initializing our page. The logic must know what is correct and incorrect, So we’ll define there the correct option and then we’ll set that when user click on the button the logic will generate and tell the user about his/her score.

5+ HTML CSS project With Source Code

The below JavaScript Code 👇will let you know about this logic link this in script src tag of your HTML Code:
var answers = ["A", "C", "B"],
    tot = answers.length;
function getCheckedValue(radioName) {
    var radios = document.getElementsByName(radioName);
    for (var y = 0; y < radios.length; y++)
        if (radios[y].checked) return radios[y].value;
}
function getScore() {
    var score = 0;
    for (var i = 0; i < tot; i++)
        if (getCheckedValue("question" + i) === answers[i]) score += 1;
    return score;
}
function returnScore() {
    document.getElementById("myresults").innerHTML =
        "Your score is " + getScore() + "/" + tot;
    if (getScore() > 2) {
        console.log("Bravo");
    }
}

Through this blog, we have learned how to design Multiple Choice Quizzes using HTML, CSS & JavaScript.

Now I’m looking for some positive reviews from your side.

So, How was the blog Learners,

If you want more interesting blog like this then please check our Blog sites. Stay tuned because every day you will learn something new here.

I hope that I’m able to make you understand this topic and that you have learned something new from this blog. If you faced any difficulty feel free to reach out to us with the help of the comment box and if you liked it, please show your love in the comment section. This fills bloggers’ hearts with enthusiasm for writing more new blogs.

Ecommerce Website Using Html Css And Javascript Source Code

Happy Coding

Written by @Harsh_9

Share on:

Leave a Comment