如何使用 json 文件制作 javascript 简单测验

Question

这是一个微不足道的问题，但是……我现在要回答这一切

我有 json 文件{

    "quiz": {
        "q1": {
            "question": "Which one is correct team name in NBA?",
            "options": [
                "New York Bulls",
                "Los Angeles Kings",
                "Golden State Warriros",
                "Huston Rocket"
            ],
            "answer": "Huston Rocket"
        },
        "q2": {
            "question": "'Namaste' is a traditional greeting in which Asian language?",
            "options": [
                "Hindi",
                "Mandarin",
                "Nepalese",
                "Thai"
            ],
            "answer": "Hindi"
        },
        "q3": {
            "question": "The Spree river flows through which major European capital city?",
            "options": [
                "Berlin",
                "Paris",
                "Rome",
                "London"
            ],
            "answer": "Berlin"
        },
        "q4": {
            "question": "Which famous artist had both a 'Rose Period' and a 'Blue Period'?",
            "options": [
                "Pablo Picasso",
                "Vincent van Gogh",
                "Salvador Dalí",
                "Edgar Degas"
            ],
            "answer": "Pablo Picasso"
        }
    }
}

并获取它，现在我需要以无线电形式创建这个问题，但是......我如何将无线电放入 javascript？

最后我需要有

这是我的小愚蠢代码

<!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>Quizapp</title>
</head>


<body>
          
</label><h2>Question 1: Which one is correct team name in NBA? </h2> <br>  
<input type="radio" id="option1" name="aoption" value="NewYorkBulls"/> New York Bulls  <br>  
<input type="radio" id="option2" name="aoption" value="LosAngelesKings"/>Los Angeles Kings<br/>  
<input type="radio" id="option3" name="aoption" value="GoldenStateWarriros"/>Golden State Warriros<br/>
<input type="radio" id="option4" name="aoption" value="HustonRocket"/>Huston Rocket<br/> 
<br>
</label><h2>Question 2:'Namaste' is a traditional greeting in which Asian language? </h2><br>  
<input type="radio" id="option1" name="boption" value="Hindi"/> Hindi  <br>  
<input type="radio" id="option2" name="boption" value="Mandarin"/>Mandarin<br/>  
<input type="radio" id="option3" name="boption" value="Nepalese"/>Nepalese<br/>
<input type="radio" id="option4" name="boption" value="Thai"/>Thai<br/> 
<br>
</label><h2>Question 3: The Spree river flows through which major European capital city? </h2><br>  
<input type="radio" id="option1" name="coption" value="Berlin"/> Berlin  <br>  
<input type="radio" id="option2" name="coption" value="Paris"/>Paris<br/>  
<input type="radio" id="option3" name="coption" value="Rome"/>Rome<br/>
<input type="radio" id="option4" name="coption" value="London"/>London<br/> 
<br>
</label><h2>Question 4: Which one is correct team name in NBA?  </h2><br>  
<input type="radio" id="option1" name="doption" value="Pablo Picasso  "/> Pablo Picasso  <br>  
<input type="radio" id="option2" name="doption" value="Vincent van Gogh"/>Vincent van Gogh<br/>  
<input type="radio" id="option3" name="doption" value="Salvador Dalí"/>Salvador Dalí<br/>
<input type="radio" id="option4" name="doption" value="Edgar Degas"/>Edgar Degas<br/> 


    <script>

    fetch("quizapp.json")
            .then(response => response.json())
            .then(json => console.log(json));
    



    </script>
    
</body>
</html>

之后，我需要将选定的答案保存在本地存储中……我有很多时间处理这个问题，因为我在学习中错过了一些东西……

Answer 1

这是您正在寻找的一个简单示例，我已经阅读了您所有的问题，并试图为您提供您能得到的最佳答案。 但请不要只按原样使用代码，而是尝试以自己的方式改进它。

 const fetchQuizz = () => { return JSON.parse(`{ "q1": { "question": "Which one is correct team name in NBA?", "options": [ "New York Bulls", "Los Angeles Kings", "Golden State Warriros", "Huston Rocket" ], "answer": "Huston Rocket" }, "q2": { "question": "'Namaste' is a traditional greeting in which Asian language?", "options": [ "Hindi", "Mandarin", "Nepalese", "Thai" ], "answer": "Hindi" }, "q3": { "question": "The Spree river flows through which major European capital city?", "options": [ "Berlin", "Paris", "Rome", "London" ], "answer": "Berlin" }, "q4": { "question": "Which famous artist had both a 'Rose Period' and a 'Blue Period'?", "options": [ "Pablo Picasso", "Vincent van Gogh", "Salvador Dalí", "Edgar Degas" ], "answer": "Pablo Picasso" } }`) } const createQuestion = ({ question, answer, options }, i) => { const field = document.createElement('fieldset') field.innerHTML = `<legend>Question ${i}</legend> <p>${question}</p> ${ options.map((option) => `<div> <input type="radio" id="option-${option}" name="answer${i}" value="${option}" ${ option === answer? 'checked': '' }> <label for="option-${option}">${option}</label> </div>`).join('') } ` return field; } const createQuizz = () => { const form = document.getElementById('quizz') const quizz = fetchQuizz() const questions = Object.values(quizz) questions.forEach((question, i) => { const field = createQuestion(question, i + 1) form.appendChild(field) }) } createQuizz()

 body { background-color: #eee; font-family: system-ui, sans-serif; cursor: default; box-sizing: border-box; } form { padding: 1rem; } form fieldset { border-radius: 1rem; background-color: white; border: 0; box-shadow: 0.25rem.5rem rgb(0 0 0 / 10%); } form fieldset:not(:last-of-type) { margin-bottom: .5rem; } form fieldset legend { position: relative; display: block; font-weight: 600; top: 1em; }

 <form method="post" id="quizz"></form>

Answer 2

我给你一个例子供你参考。

 let json = { "quiz": { "q1": { "question": "Which one is correct team name in NBA?", "options": [ "New York Bulls", "Los Angeles Kings", "Golden State Warriros", "Huston Rocket" ], "answer": "Huston Rocket" }, "q2": { "question": "'Namaste' is a traditional greeting in which Asian language?", "options": [ "Hindi", "Mandarin", "Nepalese", "Thai" ], "answer": "Hindi" }, "q3": { "question": "The Spree river flows through which major European capital city?", "options": [ "Berlin", "Paris", "Rome", "London" ], "answer": "Berlin" }, "q4": { "question": "Which famous artist had both a 'Rose Period' and a 'Blue Period'?", "options": [ "Pablo Picasso", "Vincent van Gogh", "Salvador Dalí", "Edgar Degas" ], "answer": "Pablo Picasso" } } } let quiz = document.getElementById("quiz"); let keyList = Object.keys(json.quiz); for (let j = 0; j < keyList.length; j++) { let key = keyList[j]; let questionItem = json.quiz[key]; let html = "<div>"; html += "<div><h2>Question " + (j + 1) + ": " + questionItem.question + "</h2></div>"; html += "<div>"; for (let i = 0; i < questionItem.options.length; i++) { html += "<div>"; html += "<input type=\"radio\" name=\"" + key + "_option\" value=\"" + questionItem.options[i] + "\">" + questionItem.options[i]; html += "</div>"; } html += "</div>"; html += "</div>"; quiz.innerHTML += html; } quiz.innerHTML +="<input type=\"submit\" value=\"submit\">";

 <form id="quiz"> </form>

如何使用 json 文件制作 javascript 简单测验

问题描述

2 个解决方案

解决方案1
1 2022-09-01 09:22:55

解决方案2
0 2022-09-01 09:34:15

如何使用 json 文件制作 javascript 简单测验

问题描述

2 个解决方案

解决方案1 1 2022-09-01 09:22:55

解决方案2 0 2022-09-01 09:34:15

解决方案1
1 2022-09-01 09:22:55

解决方案2
0 2022-09-01 09:34:15