在 JS 中存储用户输入并计算个性测验

Question

JS 新手！所以我的基本 html 设置了 10 个问题，并从数组开始，但我只需要澄清一下我应该做什么。我为每个答案分配了相应的值（共 4 个）。

我设置的数组只是为了帮助我形象化，我不确定应该把哪些值放在那里，因为它们对应于问题。这是我的第一个问题。

我的第二个问题是我是否创建另一个数组来存储用户输入？我使用什么属性让 JS 计算点数并给出适当的结果？

到目前为止，这是我的代码（我只提出了 10 个问题中的 2 个，因为其余的格式几乎相同）

<script>


// Questions and answers
var data ['Question 1','A','B','C','D',
      'Question 2','A','B','C','D',
      'Question 3','A','B','C','D',
      'Question 4','A','B','C','D',
      'Question 5','A','B','C','D',
      'Question 6','A','B','C','D',
      'Question 7','A','B','C','D',
      'Question 8'',A','B','C','D',
      'Question 9','A','B','C','D',
      'Question 10','A','B','C','D',]




</script>
</head>

<body>

<p id="quiz"></p>


<b id="one">1) Which lifestyle do you prefer?<br></b>

<p>
<p>
<label>
   <input id="firstone" type='radio' name="one" value="1" />
    Grounded, studious
</label>
<p>
<p>
<label>
  <input id="firsttwo" type='radio' name="one" value="2" />
    Relaxed, in control
 </label>
<p>
<p> 
<label>
   <input id="firstthree" type='radio' name="one" value="3" />
    Motivated, confident
</label>
<p>
<p>
<label>
  <input id="firstfour" type='radio' name="one" value="4" />
    Ambitious, carefree
</label>

<p>
<p>  

<b id="two">2) What kind of setting sounds ideal to live in?<br></b>

<p>
<p>
<label>
   <input id="secondone" type='radio' name="two" value="4" />
    Mountain tops
</label>
<p>
<p>
<label>
  <input id="secondtwo" type='radio' name="two" value="1" />
    Rocky Valley
 </label>
<p>
<p> 
<label>
   <input id="secondthree" type='radio' name="two" value="2" />
    Near bodies of water
</label>
<p>
<p>
<label>
  <input id="secondfour" type='radio' name="two" value="3" />
    Level ground
</label>

<p>
<p>

Answer 1

欢迎来到 JS！这绝对是一门有趣的语言，您可以从中受益匪浅。

所以首先，您采用的方法可能比需要的更复杂。

为了简化事情，你可以做的是将问题包装在一个 <form> 标签中，稍后 JS 可以引用该标签。例如，看问题 1 和问题 2，您可以这样写：

<form id="questions">
    <b id="one">1) Which lifestyle do you prefer?</b>
    <fieldset id="q1">
        <input type="radio" value="a" name="q1"> Grounded, studious<br>
        <input type="radio" value="b" name="q1"> Relaxed, in control<br>
        <input type="radio" value="c" name="q1"> Motivated, confident<br>
        <input type="radio" value="d" name="q1"> Ambitious, carefree
    </fieldset>
    <br>
    <b id="two">2) What kind of setting sounds ideal to live in?<br></b>            
    <fieldset id="q2">
        <input type="radio" value="a" name="q2"> Mountain tops<br>
        <input type="radio" value="b" name="q2"> Rocky Valley<br>
        <input type="radio" value="c" name="q2"> Near bodies of water<br>
        <input type="radio" value="d" name="q2"> Level ground<br>
    </fieldset>
    <br>
    <input type="submit">
</form>

之后，您需要添加一个提交事件处理程序，该处理程序将获取每个问题中输入的每个结果值，将它们存储在一个数组中，并根据需要从那里进行计算。这里有一个简短的片段来理解这个想法：

$( "form#questions" ).submit(function(e) {

  // This simply stops the form from submitting so you can grab data
  e.preventDefault(); 

  // Grab the values of each fieldset of radio buttons
  var a1 = document.getElementById('q1').value; // ... or some variation of this
  // Store in array or however you wish to handle it

  // Do some calculations with stored variables / array

});

我不完全确定你的问卷背后的逻辑（即它如何计算结果），但我希望这至少能让你更好地了解你如何完成它或朝哪个方向完成你可以走了

此外，作为附加说明，请查看 JavaScript Objects 以了解 JavaScript 对象，它们在数组无法工作的某些情况下非常有用。

在 JS 中存储用户输入并计算个性测验

Storing user input and calculating for personality quiz in JS

javascript

arrays

input

points