How to add an image in a quiz

أقسام الموقع: الإطار الزمني الرياضة معلومات سريعة العلوم الكون الصحة لغة وغيرها المنوعات الحيوانات باختصار

HOW TO ADD AN IMAGE IN A QUIZ USING HTML, JAVASCRIPT, AND CSS

This is a follow-up to the true or false quiz that I made recently. There will be three questions in the video, but the code will have all 10 questions.

There are three different methods of adding images in this video. The first method will be used for offline users, where the images will be used in a folder that has images file and html file from the pc. The second method is by using images uploaded from my this site. The third method is by adding images being uploaded by another image-uploading sites. The code will have the third method. The images used in this code are images from this site. The programmers can choose site they want to use to upload their images from. The image link has been colored in purple.

Code:
_______________________________________________________________
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>True or False Quiz</title>
</head>
<body>
    <style>
        #frame001 {
            border-radius: 5px;
            background-color: white;
            border: 2px solid black;
            height: 350px;
            width: 400px;
        }

        .buttons001 {
            background-color: dodgerblue;
            color: white;
            width: 70px;
            height: 30px;
            border-radius: 5px;
        }

        .buttons002 {
            background-color: blue;
            color: white;
            width: auto;
            height: 30px;
            border-radius: 5px;
        }

        #font001 {
            text-align: center;
            font-size: large;
            color: black;
        }
    </style>
    <div id="frame001">
        <div id="font001">
            <h2>True Or False Quiz</h2><text>Question: <text id="number001">0</text></text><br />
            <text>Score: <text id="score001">0</text></text>
            <hr />
            <div id="disappear001">
                <button class="buttons002" onclick="begin001()">Begin</button>
            </div>
            <p id="message001"></p>
            <p id="message002"></p>
            <p id="message003"></p>
            <p id="message004"></p>
        </div>
    </div>
    <script>
        var question001 = ["<img src=https://www.ikhtabirni.com/uploads/1/6/6/4/16649102/pictures_092.png height=40 /><br /><br />What is the answer to the image above?",
            "<img src=https://www.ikhtabirni.com/uploads/1/6/6/4/16649102/pictures_092.png height=40 /><br /><br />What is the answer to the image above?",
            "<img src=https://www.ikhtabirni.com/uploads/1/6/6/4/16649102/pictures_092.png height=40 /><br /><br />What is the answer to the image above?",
            "<img src=https://www.ikhtabirni.com/uploads/1/6/6/4/16649102/pictures_092.png height=40 /><br /><br />What is the answer to the image above?",
            "<img src=https://www.ikhtabirni.com/uploads/1/6/6/4/16649102/pictures_092.png height=40 /><br /><br />What is the answer to the image above?",
            "<img src=https://www.ikhtabirni.com/uploads/1/6/6/4/16649102/pictures_092.png height=40 /><br /><br />What is the answer to the image above?",
            "<img src=https://www.ikhtabirni.com/uploads/1/6/6/4/16649102/pictures_092.png height=40 /><br /><br />What is the answer to the image above?",
            "<img src=https://www.ikhtabirni.com/uploads/1/6/6/4/16649102/pictures_092.png height=40 /><br /><br />What is the answer to the image above?",
            "<img src=https://www.ikhtabirni.com/uploads/1/6/6/4/16649102/pictures_092.png height=40 /><br /><br />What is the answer to the image above?",
            "<img src=https://www.ikhtabirni.com/uploads/1/6/6/4/16649102/pictures_092.png height=40 /><br /><br />What is the answer to the image above?"
        ];

        var options001 = ["<button class=buttons001 onclick=q1i()>1</button><br /><br /><button class=buttons001 onclick=q1c()>2</button>"];
        var options002 = ["<button class=buttons001 onclick=q1c()>3</button><br /><br /><button class=buttons001 onclick=q1i()>4</button>"];
        var options003 = ["<button class=buttons001 onclick=q1c()>5</button><br /><br /><button class=buttons001 onclick=q1i()>6</button>"];
        var options004 = ["<button class=buttons001 onclick=q1i()>1</button><br /><br /><button class=buttons001 onclick=q1c()>2</button>"];
        var options005 = ["<button class=buttons001 onclick=q1c()>3</button><br /><br /><button class=buttons001 onclick=q1i()>4</button>"];
        var options006 = ["<button class=buttons001 onclick=q1c()>5</button><br /><br /><button class=buttons001 onclick=q1i()>6</button>"];
        var options007 = ["<button class=buttons001 onclick=q1i()>1</button><br /><br /><button class=buttons001 onclick=q1c()>2</button>"];
        var options008 = ["<button class=buttons001 onclick=q1c()>3</button><br /><br /><button class=buttons001 onclick=q1i()>4</button>"];
        var options009 = ["<button class=buttons001 onclick=q1c()>5</button><br /><br /><button class=buttons001 onclick=q1i()>6</button>"];
        var options010 = ["<button class=buttons001 onclick=q1i()>1</button><br /><br /><button class=buttons001 onclick=q1c()>2</button>"];

        var a = 0;
        a++;
        var b = 0;
        b++;

        function begin001() {
            disappear001.innerHTML = "";
            message001.innerHTML = question001[0];
            message002.innerHTML = options001;
            number001.innerHTML = a++;
        }

        function q1c() {
            message003.innerHTML = "Correct";
            message002.innerHTML = "";
            score001.innerHTML = b++;
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function q1i() {
            message003.innerHTML = "Incorrect";
            message002.innerHTML = "";
            message004.innerHTML = "<button class=buttons002 onclick=next001()>Next</button>";
        }

        function next001() {
            if (a == "2") {
                message001.innerHTML = question001[1];
                message002.innerHTML = options002;
                message003.innerHTML = "";
                number001.innerHTML = a++;
                message004.innerHTML = "";
            }

            else if (a == "3") {
                message001.innerHTML = question001[2];
                message002.innerHTML = options003;
                message003.innerHTML = "";
                number001.innerHTML = a++;
                message004.innerHTML = "";
            }

            else if (a == "4") {
                message001.innerHTML = question001[3];
                message002.innerHTML = options004;
                message003.innerHTML = "";
                number001.innerHTML = a++;
                message004.innerHTML = "";
            }

            else if (a == "5") {
                message001.innerHTML = question001[4];
                message002.innerHTML = options005;
                message003.innerHTML = "";
                number001.innerHTML = a++;
                message004.innerHTML = "";
            }

            else if (a == "6") {
                message001.innerHTML = question001[5];
                message002.innerHTML = options006;
                message003.innerHTML = "";
                number001.innerHTML = a++;
                message004.innerHTML = "";
            }

            else if (a == "7") {
                message001.innerHTML = question001[6];
                message002.innerHTML = options007;
                message003.innerHTML = "";
                number001.innerHTML = a++;
                message004.innerHTML = "";
            }

            else if (a == "8") {
                message001.innerHTML = question001[7];
                message002.innerHTML = options008;
                message003.innerHTML = "";
                number001.innerHTML = a++;
                message004.innerHTML = "";
            }

            else if (a == "9") {
                message001.innerHTML = question001[8];
                message002.innerHTML = options009;
                message003.innerHTML = "";
                number001.innerHTML = a++;
                message004.innerHTML = "";
            }

            else if (a == "10") {
                message001.innerHTML = question001[9];
                message002.innerHTML = options010;
                message003.innerHTML = "";
                number001.innerHTML = a++;
                message004.innerHTML = "";
            } else {
                message001.innerHTML = "End of Quiz";
                message002.innerHTML = "";
                message003.innerHTML = "";
                message004.innerHTML = "<button class=buttons002 onclick=repeat001()>Repeat</button>";
            }
        }

        function repeat001() {
            location.reload();
        }
    </script>
</body>
</html>

If you want to watch the video and see how it is done, you can check it out below.

Other Topics:

General Facts
Nutritions Facts
Sports Facts