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

Question

its trivial question but...im now to this all这是一个微不足道的问题，但是……我现在要回答这一切

i have json file {我有 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"
        }
    }
}

and fetch that,now i need to create this question in radio form,but...how do i put radio in javascript?并获取它，现在我需要以无线电形式创建这个问题，但是......我如何将无线电放入 javascript？

In the end i need to have最后我需要有

Here is my little stupid 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>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>

after that i need to save selected answers in localstorage...i have ruff time with this cuz i missed something in the learning...之后，我需要将选定的答案保存在本地存储中……我有很多时间处理这个问题，因为我在学习中错过了一些东西……

Answer 1

This is a simple example of what you are looking for, I have read all your question and tried to give you the best answer you could get.这是您正在寻找的一个简单示例，我已经阅读了您所有的问题，并试图为您提供您能得到的最佳答案。 But please don't just use the code as it is, but try to improve it your way.但请不要只按原样使用代码，而是尝试以自己的方式改进它。

 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

I give you an example for your reference.我给你一个例子供你参考。

 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