如何一次随机显示三个DIV？

Question

我正在尝试使用三种不同的方法来创建一个测验应用程序，以回答问题，可以通过使用无线电，文本输入或下拉来回答问题。我创建了三个＆lt; div＆gt;每个都有不同的答案方法，我如何在我的页面上随机显示其中的一个＆lt; div＆gt;？

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 class="quiz-container">
        <div class="header"><h3>Interactive Quiz App</h3></div>

        <div class="quiz">
            <div class="question-no"><h3>Question 1 of 5</h3></div>

            <div class="questions">
                <div class="question-text">
                    <h4 id="question">When is 2 * 18 ?</h4>
                </div>

                <div class="question-options">
                    <!-- Drop Down -->
                    <div class="drop-down" 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 class="radio" id="radio">
                        <label class="radio-container" id="label1">
                            <input type="radio" name="radioQuiz" id="1" value="1">
                            <span class="mqs">Hello</span>
                        </label>
                        <label class="radio-container" id="label2">
                            <input type="radio" name="radioQuiz" id="2" value="2">
                            <span class="mqs">Hello</span>
                        </label>
                        <label class="radio-container" id="label3">
                            <input type="radio" name="radioQuiz" id="3" value="3">
                            <span class="mqs">Hello</span>
                        </label>
                        <label class="radio-container" id="label4">
                            <input type="radio" name="radioQuiz" id="4" value="4">
                            <span class="mqs">Hello</span>
                        </label>
                    </div>

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

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

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

我如何一次仅显示此div一次随机显示一个，当我单击下一个按钮时，它应该给出另一种随机答案方法。

Answer 1

您可以尝试此解决方案。

1. 隐藏所有选项最初
2. 单击下一个按钮，随机选择一个未选择的选项，
3. 如果存在以前的选项，请隐藏该选项
4. 使可见的新随机选项

html代码：

<!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 class="quiz-container">
        <div class="header">
            <h3>Interactive Quiz App</h3>
        </div>

        <div class="quiz">
            <div class="question-no">
                <h3>Question 1 of 5</h3>
            </div>

            <div class="questions">
                <div class="question-text" >
                    <h4 id="question">When is 2 * 18 ?</h4>
                </div>

                <div class="question-options">
                    <!-- Drop Down -->
                    <div class="drop-down" 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 class="radio" id="radio" style="visibility: hidden;">
                        <label class="radio-container" id="label1">
                            <input type="radio" name="radioQuiz" id="1" value="1">
                            <span class="mqs">Hello</span>
                        </label>
                        <label class="radio-container" id="label2">
                            <input type="radio" name="radioQuiz" id="2" value="2">
                            <span class="mqs">Hello</span>
                        </label>
                        <label class="radio-container" id="label3">
                            <input type="radio" name="radioQuiz" id="3" value="3">
                            <span class="mqs">Hello</span>
                        </label>
                        <label class="radio-container" id="label4">
                            <input type="radio" name="radioQuiz" id="4" value="4">
                            <span class="mqs">Hello</span>
                        </label>
                    </div>

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

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

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

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

</html>

JS代码

// 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"; 
 
}

Answer 2

这应该有效

编辑：我编辑它在时间

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" class="mydiv">1</div>
<div style="background-color:green" class="mydiv">2</div>
<div style="background-color:khaki" class="mydiv">3</div>