ADVERTISEMENT

Responsive Quiz App Using HTML, CSS & JavaScript

Telegram Group Join Now

ADVERTISEMENT

Responsive Quiz App Using HTML, CSS & JavaScript

Multiple Choice Quiz using HTML, CSS & JavaScript
Multiple Choice Quiz using HTML, CSS & JavaScript

We’ll build a quiz app using JavaScript, HTML, and CSS in this blog post. The multiple-choice questions in this simple quiz app need you to select one of the possible responses. The results page will then be shown. This work will be finished using JavaScript, a powerful language that allows for anything.

ADVERTISEMENT

Code by N/A
Project Download N/A
Language used HTML, CSS and JavaScript
External link / Dependencies No
Responsive YES
Multiple Choice Quize Table

ADVERTISEMENT

 

Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here

ADVERTISEMENT

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

ADVERTISEMENT

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 Code Multiple Choice Quiz 

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:

ADVERTISEMENT

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>

Output:

Responsive Quiz App Using HTML, CSS & JavaScript

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.

ADVERTISEMENT

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

ADVERTISEMENT

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

 
The analysis will be aided by the CSS code below. After adding this file to your link rel-tag, wait for the results.
We will add some of the basic styling to our quiz app using the default selector, and we will add styling to various quiz app elements using the class selector. Our quiz app will have a margin and padding.
 
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;
}

Output:

Responsive Quiz App Using HTML, CSS & JavaScript

Javascript Section:

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.

ADVERTISEMENT

5+ HTML CSS project With Source Code

ADVERTISEMENT

 
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 Quize using HTML, CSS & JavaScript.

ADVERTISEMENT

Final Output:

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

ADVERTISEMENT

So, How was the blog Learners,

ADVERTISEMENT

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

Which code editor do you use for this Multiple Choice Quiz project coding?

I personally recommend using VS Code Studio, it’s very simple and easy to use.

is this project responsive or not?

Yes! this project is a responsive project.

Do you use any external links to create this project?

No!

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT