2015-09-20 20 views
1

JS新手!所以我有我的基本的HTML設置了10個問題,並開始在數組上,但我只需要澄清我應該做什麼。我給每個答案分配了相應的結果值(4分)。存儲用戶輸入並計算JS中的個性測驗

我設置的陣列只是爲了幫助我形象化,我不確定將哪些值放在那裏,因爲它們與問題對應。這是我的第一個問題。

我的第二個是創建另一個數組來存儲用戶輸入嗎?我用什麼屬性讓JS計算得分並給出合適的結果?

這裏是我到目前爲止的代碼(我只放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> 
+0

[This](http://jsfiddle.net/SantoshPandu/s7cp53t1/1/)可能會幫助你學習JS,創建動態的問題和答案並獲得選定的答案。如果這有助於你,我會發布它作爲答案@Jclee –

回答

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對象,它們在某些情況下非常有用,例如陣列不起作用。

+0

這是非常有益的!我只需要研究一下。我只是做了用戶選擇最多的值,與該值相對應的結果將顯示在最後。出於一些研究,我猜如果其他循環將有助於計算?只需要研究那些現在>< – Jclee

+1

是!學習JS的最好方法就是玩弄它並查找文檔。如果你只是抓住了用戶選擇最多的值,我建議將所有值存儲在一個數組中,然後只計算每個值的出現次數並確定哪個次數最多。我稍微更新了第一個代碼片段,讓這些值使用a,b,c和d而不是q1a,q1b等,這樣您可以更容易地計算出現次數 –

相關問題