我想让我的javascript测试为每个问题显示不同的选择
我正在尝试创建一个workoutcalculator，它将根据用户选择的训练内容为他们生成特定的训练 我正在尝试创建一个测验，以便每个问题都有不同数量的答案，例如，他们的年龄大约是5-6个不同的答案，当然，他们的性别只有2个 让它工作的最佳方法是什么 请原谅我糟糕的代码这是我第一个使用javascript的繁重项目我想让我的javascript测试为每个问题显示不同的选择,javascript,html,css,Javascript,Html,Css,我正在尝试创建一个workoutcalculator，它将根据用户选择的训练内容为他们生成特定的训练 我正在尝试创建一个测验，以便每个问题都有不同数量的答案，例如，他们的年龄大约是5-6个不同的答案，当然，他们的性别只有2个 让它工作的最佳方法是什么 请原谅我糟糕的代码这是我第一个使用javascript的繁重项目 <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" con
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Work Out Programme</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!--Start of Work out Calculator-->
<div id="start">Start your workout journey</div>
<!--Quiz Container-->
<div id="quiz" style="display: none;">
<div id="question">
<p> Question </p>
</div>
<!--Choices Containers-->
<!--Male or female Question-->
<div id="choices1">
<div class="choiceA1" id="A1" onclick="checkAnswer('A1')"></div>
<div class="choiceB1" id="B1" onclick="checkAnswer('B1')"></div>
</div>
<!--Your age Question-->
<div id="choices2">
<div class="choiceA2" id="A2" onclick="checkAnswer('A2')"></div>
<div class="choiceB2" id="B2" onclick="checkAnswer('B2')"></div>
<div class="choiceC2" id="C2" onclick="checkAnswer('C2')"></div>
<div class="choiceD2" id="D2" onclick="checkAnswer('D2')"></div>
<div class="choiceE2" id="E2" onclick="checkAnswer('E2')"></div>
<div class="choiceF2" id="F2" onclick="checkAnswer('F2')"></div>
</div>
<!--Male current condition Question-->
<div id="choices3">
<div class="choiceA3" id="A3" onclick="checkAnswer('A3')"></div>
<div class="choiceB3" id="B3" onclick="checkAnswer('B3')"></div>
<div class="choiceC3" id="C3" onclick="checkAnswer('C3')"></div>
<div class="choiceD3" id="D3" onclick="checkAnswer('D3')"></div>
</div>
<!--Female current condition Question-->
<div id="choices4">
<div class="choiceA4" id="A4" onclick="checkAnswer('A4')"></div>
<div class="choiceB4" id="B4" onclick="checkAnswer('B4')"></div>
<div class="choiceC4" id="C4" onclick="checkAnswer('C4')"></div>
</div>
<!--all the choices need to be unique as every quesiton is going to have a different number of question and answers this is so that depending on what the user choices it will match their choice -->
</div>
<!--Score Container-->
<div id="scoreContainer" style="display: none;"></div>
</body>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="./app.js"></script>
</html>
const start = document.getElementById("start");
const quiz = document.getElementById("quiz");
const question = document.getElementById("question");
const scoreContainer = document.getElementById("scoreContainer");
// this is where I need to pull all the choices from the html document and then get them to run and return something based on what has been chosen i also need to figure out if i need to pull every single on or just the id for example more invesitgating is needed
/*const choiceA = document.getElementById("A");
const choiceB = document.getElementById("B");
const choiceC = document.getElementById("C");
*/
// Pulling through the questions for choice 1 Male or female Question
const choiceA1 = document.getElementById('A1');
const choiceB1 = document.getElementById('B1');
// Pulling through the questions for choice 2 Your age Question
const choiceA2 = document.getElementById('A2');
const choiceB2 = document.getElementById('B2');
const choiceC2 = document.getElementById('C2');
const choiceD2 = document.getElementById('D2');
const choiceE2 = document.getElementById('E2');
const choiceF2 = document.getElementById('F2');
// Pulling through the questions for choice 3 Male current condition Question
const choiceA3 = document.getElementById('A3');
const choiceB3 = document.getElementById('B3');
const choiceC3 = document.getElementById('C3');
const choiceD3 = document.getElementById('D3');
// Pulling through the questions for choice 4 Female current condition Question
const choiceA4 = document.getElementById('A4');
const choiceB4 = document.getElementById('B4');
const choiceC4 = document.getElementById('C4');
// Questions for the quiz
let questions = [
{
question: "What is your sex?",
choiceA1: "Male",
choiceB1: "Female",
//correct //need to figure out later
},
{
question: "What is your age range?",
choiceA2: "Teens",
choiceB2: "20's",
choiceC2: "30's",
choiceD2: "40's",
choiceE2: "50's",
choiceF2: "60+",
//correct //need to figure out later
},
{
question: "Please select the best description of your current condition:",
choiceA3: "I have low levels of body fat, I can see my abs, and I want to build more muscle",
choiceB3: "I'm 'skinny fat' I look skinny and definitely need more muscle, but I still have fat covering my abs",
choiceC3: "I have a good level of muscle size, but I need to drop fat to reveal muscle definition and six pack abs",
choiceD3: "I have no clue how much muscle I have with all this fat covering it I need to loose a bunch of fat!",
//correct //need to figure out later
},
{
question: "Please Select The Best Description of Your Current Physique:",
choiceA4: "I have a slim body type and want to gain muscle in the right areas to look my best",
choiceB4: "I have stubborn body fat. I want to slim down and increase my muscle tone",
choiceC4: "I have more than 10kg of fat to lose - I want to drop all this fat and look my best",
//correct //need to figure out later
}
];
// Create some variables
const lastQuestion = questions.length - 1;
let runningQuestion = 0;
// run a question
function runQuestion() {
let q = questions[runningQuestion];
question.innerHTML = "<p>" + q.question + "</p>";
choiceA1.innerHTML = q.choiceA1;
choiceB1.innerHTML = q.choiceB1;
choiceA2.innerHTML = q.choiceA2;
}
start.style.display = "none";
runQuestion();
quiz.style.display = "block";
性别，这些天有两个以上的选择-您使用了checkAnswer函数，但没有定义它。为了分析答案，我更喜欢嵌套的父级和子级，其中父级的数据问题=1，答案的数据答案=1，数据答案=2等。您不需要在每个答案上定义单击侦听器。只需使用全局函数保存所选答案及其父数据。