How do I display three divs randomly one at a time?-CodePudding

I am trying to create a quiz app with three different ways to answer the questions, the questions can be answered by using either a radio, text-input or drop-down. I created three <div> each having the different answering methods, how can I display just one of those <div> randomly on my page ?

const userName = document.getElementById("user-name");
const submitUserName = document.getElementById("submitUserName");
const nav = document.querySelector("a");

submitUserName.onclick = function() {

    if (userName.value == "") {
        alert("Kindly Input your Name !")
    } else {
        nav.setAttribute("href", "/quiz/index.html")
    }
}

const quizQuestions = [
    {
        question: "Which language runs in a web browser ?",
        a: "Python",
        b: "Javascript",
        c: "Java",
        d: "Flutter",
        ans: b, 
    },

    {
        question: "How many standard color names does HTML supports ?",
        a: "20",
        b: "90",
        c: "140",
        d: "125",
        ans: c, 
    },

    {
        question: "Javascript displays numbers as base ?",
        a: "10",
        b: "2",
        c: "5",
        d: "12",
        ans: a, 
    },

    {
        question: "Who is the father of computer ?",
        a: "Charles Babbage",
        b: "Allan Turing",
        c: "Issac Newton",
        d: "Bill Gate",
        ans: a, 
    },

    {
        question: "The brain of a computer is ?",
        a: "ALU",
        b: "DVD",
        c: "CPU",
        d: "Memory",
        ans: c, 
    },

    {
        question: "What year was JavaScript launched ?",
        a: "1996",
        b: "1995",
        c: "1994",
        d: "1993",
        ans: b, 
    },

    {
        question: "Junk e-mail is called ?",
        a: "junk",
        b: "spoof",
        c: "sperm",
        d: "spam",
        ans: d, 
    },

    {
        question: "Which tag is used for list-items ?",
        a: "<ol>",
        b: "<ul>",
        c: "<dl>",
        d: "<li>",
        ans: d, 
    },

    {
        question: "How old is Bill Gate ?",
        a: "59",
        b: "60",
        c: "56",
        d: "66",
        ans: d, 
    },

    {
        question: "Which opetator is used to assign a value to a variable ?",
        a: "=",
        b: "&",
        c: "%",
        d: "$",
        ans: a, 
    },

    {
        question: "How do you declare a JavaScript variable ?",
        a: "variable myVar",
        b: "v myVar",
        c: "var myVar",
        d: "vrb myVar",
        ans: c, 
    },
];

@import url(https://fonts.googleapis.com/css?family=Poppins:100,200,300,regular,500,600,700,800,900);
:root {
    --background: rgb(29, 26, 26);
    --text-color: rgb(255, 255, 255);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

h3, h4 {
    color: var(--text-color);
}

body {
    background-color: var(--background);
    font-family: 'Poppins', sans-serif;
}

.quiz-container {
    margin: 30px auto;
    width: 70%;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.header h3 {
    color: var(--text-color);
    font-size: 30px;
}

.questions {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.question-no {
    margin-bottom: 15px;
}

.question-options {
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100%;
    margin: 0 auto;
}

select {
    padding: 8px;
    outline: none;
    border: none;
    font-size: 15px;
    cursor: pointer;
    width: 50%;
}

option{
    cursor: pointer;
}

.question-tog {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 50%;
    margin: 0 auto;
}

.drop-down, .radio, .text-input {
    width: 100%;
}
.radio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.radio-container {
    display: flex;
    gap: 10px;
    width: 50%;
    background-color: white;
    padding: 8px;
    border-radius: 5px;
}

.radio-container:hover {
    cursor: pointer;
    box-shadow: 0 0.4rem 1.4rem 0 black;
    transform: scale(1.05);
    transition: transform 100ms;
}

.radio-container input[type="radio"] {
    margin-left: 10px;
    cursor: pointer;
}

.text-input input[type="text"] {
    width: 50%;
    padding: 10px;
    outline: none;
    font-size: 15px;
    border-radius: 5px;
    border: none;
}

button {
    padding: 8px 35px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 20px;
}

i {
    font-size: 25px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Quiz App</title>
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="/quiz/style.css">
</head>
<body>
    <!-- Quiz Container -->
    <div >
        <div ><h3>Interactive Quiz App</h3></div>

        <div >
            <div ><h3>Question 1 of 5</h3></div>

            <div >
                <div >
                    <h4 id="question">When is 2 * 18 ?</h4>
                </div>

                <div >
                    <!-- Drop Down -->
                    <div  id="drop-down">
                        <select name="format" id="format">
                            <option selected disabled>Choose your answer</option>
                            <option value="1">32</option>
                            <option value="2">36</option>
                            <option value="3">62</option>
                            <option value="4">22</option>
                        </select>
                    </div>

                    <!-- Radio -->
                    <div  id="radio">
                        <label  id="label1">
                            <input type="radio" name="radioQuiz" id="1" value="1">
                            <span >Hello</span>
                        </label>
                        <label  id="label2">
                            <input type="radio" name="radioQuiz" id="2" value="2">
                            <span >Hello</span>
                        </label>
                        <label  id="label3">
                            <input type="radio" name="radioQuiz" id="3" value="3">
                            <span >Hello</span>
                        </label>
                        <label  id="label4">
                            <input type="radio" name="radioQuiz" id="4" value="4">
                            <span >Hello</span>
                        </label>
                    </div>

                    <!-- Text Input -->
                    <div  id="text-input">
                        <input type="text" name="text-input" id="text-answer">
                    </div>
                    
                </div>
            </div>
        </div>

        <!-- Question Next and Previous -->
        <div >
            <button > <span>Prev</span> <i class='bx bx-left-arrow-alt'></i></button>
            <button > <span>Next</span> <i class='bx bx-right-arrow-alt'></i></button>
        </div>
    </div>

    <script src="/quiz/main.js"></script>
</body>
</html>

How can I display just one of this div randomly one at a time and when I click on the next button it should give another random answering method.

CodePudding user response：

this should work

Edit: I editet it that it shows only one at time

var elements = document.getElementsByClassName("mydiv");
var rndelement  = Math.floor(Math.random() * elements.length);
console.log("rndeele ment");
console.log(rndelement);
for(var i = 0 ; i < elements.length; i  ){

  if(i==rndelement){
      elements[i].style.visibility = 'visible';
  }else {
      elements[i].style.visibility = 'hidden';
  }   
}

HTML:

<div style="background-color:red" >1</div>
<div style="background-color:green" >2</div>
<div style="background-color:khaki" >3</div>

CodePudding user response：

you may try this solution.

Hide all options initially
On clicking the Next button, randomly select an unselected option
If a previous option exists, hide that option
Make visible the new random option

HTML code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Quiz App</title>
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- Quiz Container -->
    <div >
        <div >
            <h3>Interactive Quiz App</h3>
        </div>

        <div >
            <div >
                <h3>Question 1 of 5</h3>
            </div>

            <div >
                <div  >
                    <h4 id="question">When is 2 * 18 ?</h4>
                </div>

                <div >
                    <!-- Drop Down -->
                    <div  id="drop-down" style="visibility: hidden;">
                        <select name="format" id="format">
                            <option selected disabled>Choose your answer</option>
                            <option value="1">32</option>
                            <option value="2">36</option>
                            <option value="3">62</option>
                            <option value="4">22</option>
                        </select>
                    </div>

                    <!-- Radio -->
                    <div  id="radio" style="visibility: hidden;">
                        <label  id="label1">
                            <input type="radio" name="radioQuiz" id="1" value="1">
                            <span >Hello</span>
                        </label>
                        <label  id="label2">
                            <input type="radio" name="radioQuiz" id="2" value="2">
                            <span >Hello</span>
                        </label>
                        <label  id="label3">
                            <input type="radio" name="radioQuiz" id="3" value="3">
                            <span >Hello</span>
                        </label>
                        <label  id="label4">
                            <input type="radio" name="radioQuiz" id="4" value="4">
                            <span >Hello</span>
                        </label>
                    </div>

                    <!-- Text Input -->
                    <div  id="text-input" style="visibility: hidden;">
                        <input type="text" name="text-input" id="text-answer">
                    </div>

                </div>
            </div>
        </div>

        <!-- Question Next and Previous -->
        <div >
            <button  id="prevBtn"> <span>Prev</span> <i class='bx bx-left-arrow-alt'></i></button>
            <button  id="nextBtn"> <span>Next</span> <i class='bx bx-right-arrow-alt'></i></button>
        </div>
    </div>

    <script src="main.js"></script>
</body>

</html>

JS code

// next button
const nextBtn = document.getElementById("nextBtn");
// drop down
const dropDownOption = document.getElementById("drop-down");
// radio
const radioOption = document.getElementById("radio");
// text
const textOption = document.getElementById("text-input");

// currently displayed option
let currentOption = null;

nextBtn.onclick = function() {
    const optionTypes = ['drop-down', 'radio', 'text-input'];
    let randomOption = optionTypes[Math.floor(Math.random() * optionTypes.length)]

    while (randomOption === currentOption) {
        // re-generate random options until a different random option is received
        randomOption = optionTypes[Math.floor(Math.random() * optionTypes.length)];
    }

    // hide current option, if exists
    if (currentOption != null) document.getElementById(currentOption).style.visibility = "hidden";  
    currentOption = randomOption;

    // show new random option
    document.getElementById(randomOption).style.visibility = "visible"; 
 
}