anime-quiz

Quiz: Ultimate Anime Quiz

Create A Anime Quiz Using HTML CSS and JavaScript

Don’t tell me you’re an Anime fan if you can’t answer this quiz. But before that in this article, you can easily learn to create your own quiz web app. And moreover, you can then deploy it on Netlify. Sounds great, doesn’t it? 

Moreover, if you don’t know how to code, you can try out the quiz which is already been created. The link is provided at the end of this article. 

Basic HTML To Add In Quiz Web App

HTML stands for Hypertext Markup Language. It is the main structure to create the website. Here are some examples of HTML tags that we have used in the Quiz Web App.

First, we create the minimal structure of HTML.

<h2>Displays Question</h2>

The heading tags vary in size from h1 to h6. Where h1 is the biggest and h2 is the smallest heading tag.

Example:

<h1> One Piece </h1>
<h3> Wano Arc </h3>
<h4> Luffy Vs Kaido </h4>

Ordered List And Unordered List

An Ordered List is nothing but a list of items that are ordered and are organized by numbers. Unordered List is unordered and is organized by Bullets. Ordered List is denoted by ol tag whereas Unordered List is denoted by ul tag. Inside them, there are a bunch of lists denoted by li tag. Examples:

<ol>
  <h3> Anime Vyuh Top 3 Anime </h3>
    <li>One Piece</li>
    <li>Gintama</li>
    <li>Attack On Titan</li>
</ol>



<ul>
  <h3>Favourite Fights</h3>
    <li>Kakashi Vs Obito</li>
    <li>Gintoki Vs Takasugi</li>
    <li>Akame Vs Esdeath</li>
</ul>

Since HTML is just a raw structure, i.e., a skeleton of your website. You can furthermore add style to the Web App using CSS. 

You can learn HTML here.

Style Quiz Web App Using CSS

CSS is responsible for styling your website. Moreover using CSS properties you can make your website responsive.

Before looking into the syntax to use CSS, connect the HTML file to CSS using the below tag.

<link rel="stylesheet" type="text/css" href="styles.css">

Syntax:

selector{
property:value;
property:value;
}
/*where selector is used to select Html*/
/*And I am comment by the way*/
/*so you can ignore me*/

Here is a basic example to style a heading tag.

h2{
color:#1a1a1a;
}

Use of CSS to select class and ID from HTML.

/*to select class attribute*/

.btn{
background-color:"yellow";
}


/* to select id attribute */
#btn{
display:block
}

Some basic CSS selectors example to syle ul and li tag which we used in HTML

ul li{
    cursor: pointer;
    list-style: none;
    font-weight: bolder;
    line-height: 1.7rem;
    font-size: 1.0rem !important;
    color: rgb(224, 224, 224);
}

The cursor property converts the type of cursor when the mouse moves over the list. Line height is the space between text. Since li will be executed with bullets, remove the bullets by making the list style none. Rest all the property is self-explanatory.

You can learn CSS here.

JavaScript

JavaScript Object: To Store Anime Quiz Question With Answers

Object are nothing but real world entities, which has certain values and properties. Consider an example:

const one_piece = {"main":"Luffy","side":"Zoro","cook":"Sanji"};

//to select property from object
one_piece["cook"]
"Sanji"
one_piece.main
"Luffy"

Using the JavaScript Objects we can display the questions with 4 options and also the answers within a single property-value pair. A Sample example:

const questions = [
    {
        q: "Sample question 1",
        a: "A",
        b: "B",
        c: "C",
        d: "D",
        answer: "d",
        url:"https://static2.cbrimages.com/wordpress/wp-content/uploads/2019/12/Swords-Wielded-by-Zoro-Featured.jpg",
    },
    {
        q: "Sample Question 2",
        a: "A",
        b: "B",
        c: "C",
        d: "D",
        answer: "a",
        url:"...",
    }
]

JavaScript HTML DOM

DOM Interface In Quiz Web App is used to update the question after each button click.

When a web page is loaded, the browser creates a Document Object Model of the page.

document.getElementById: Use to select the id from HTML and can update or modify its content.

//select
const a_question = document.getElementById('optiona');
const b_question = document.getElementById('optionb');
const c_question = document.getElementById('optionc');
const d_question = document.getElementById('optiond');
//modify
a_question.innerHTML = questions[currentQuestion].a
b_question.innerHTML = questions[currentQuestion].b
c_question.innerHTML = questions[currentQuestion].c
d_question.innerHTML = questions[currentQuestion].d

document.querySelectorAll: To select the multiple styles with the same attribute and modify it. It returns a Node i.e., List.

const answer_id = document.querySelectorAll('.ans');
// to choose only one option at a time.
function checkFirst() {
    answer_id.forEach(answer_check => answer_check.checked = false)
}

The addEventListener() the method attaches an event handler to the specified element.

btn.addEventListener('click',function)

Using the above code we can create a function that can update scores and new questions.

btn.addEventListener('click',() => {
    const ans = checkedAnswer()
    if(ans){
        if(ans === questions[currentQuestion].answer){
            score += 10
        }

    currentQuestion += 1
    if (currentQuestion < questions.length){
        load_question()
    }

    else{
        if(score>60){
            quiz.innerHTML =`
            <h2> Well Done Weebo👌</h2>
            <h3> Your Score ${score}/100 👀👏</h3>
            <button onclick="location.reload()">Play Again</button>
            `
            }
        else{
            quiz.innerHTML =`
            <h2> Watch More Anime Normie👊</h2>
            <h3> Your Score ${score}/100 👀👎</h3>
            <button onclick="location.reload()">Play Again</button>
            `
        }
    }
    }
    else{
        alert("Yo Answer Something,dattebayo👼")
    }
}
)

You can learn JavaScript here.

Deploy A Website On Netlify

Lastly is deploying our static Quiz App on Netlify.

To get started, register yourself in Netlify. And the only prerequisites required are your account on any GIT Host(GitHub, BitBucket, GitLab). Netlify makes it crazy easy for developers to host websites, in a way that is scalable and secure.

Once you create your account, deploy your website. Follow my article on GeeksforGeeks, where I have shared step-by-step procedures to deploy a website on Netlify

Conclusion:

Anime Quiz is a small fun activity for every weeb out there. So keeping that in mind, I have taken easy to difficult 10 questions for the quiz. Here is the deployed Quiz Web App: https://ultimate-animequiz.netlify.app/

Ganbatte Senpai🙄

If you liked the content, feel free to contribute by Buying Me A Coffee