作者Verdana (芙丹娜)
看板Web_Design
標題[請益] 如何製作javascript線上績分題
時間Thu Jul 2 06:40:27 2015
我想要做這個網頁的線上績分題
http://www.2h.com.tw/event/20150409/index.html?a=1538
它的js：
http://www.2h.com.tw/event/20150409/js/script.js
可是我實在看不是很懂它在寫什麼
<div class="q_block" id="q1">
<h3>Part 1.您頭皮的症狀？</h3>
<div class="checkall">
<span style="visibility:hidden;">Part 1.</span>
<input type="checkbox" class="checkbox" name="q1" id="q1_1" />
掉髮多或頭皮油膩的問題<br />
<span style="visibility:hidden;">Part 1.</span>
<input type="checkbox" class="checkbox" name="q1" id="q1_2" />
長痘痘<br />
<span style="visibility:hidden;">Part 1.</span>
<input type="checkbox" class="checkbox" name="q1" id="q1_3" />
容易紅腫、癢<br />
<span style="visibility:hidden;">Part 1.</span>
<input type="checkbox" class="checkbox" name="q1" id="q1_4" />
易有頭皮屑</div>
<div class="q_button" onClick="next();">下 一 題</div>
=============================================================================
var q_idx = 1;
function next(){
if(q_idx == 1){
var score = 0;
for(var i = 1 ; i <= 1 ; i++){
for(var j = 1 ; j <= 2; j++){
if(document.getElementById('q' + i + '_' + j).checked) score++;
}
}
document.getElementById('score1').innerHTML = score;
document.getElementById('BannerAll').style.display = 'none';
document.getElementById('Address').style.display = 'none';
}
==============================================================================
上面這個應該是 next()跑到下一題的函式
跑到下一題後把有 BannerAll和Address id屬性的tag消掉
這邊的i和j應該為input的id q1_1~4 設的迴圈
每勾一個得一分嗎？不太懂它分數是怎麼算..
另外分數(變數score)會顯示在上面具有id=scorel的tag
您的頭皮總合分析 <span id="score1">0</span> 分
但是這個ans區域是到後來才顯示，前面幾題作答沒有出來@_@
==============================================================================
if(q_idx == 3){
var score = 0;
for(var i = 1 ; i <= 3; i++){
for(var j = 1 ; j <= 4; j++){
if(document.getElementById('q' + i + '_' + j).checked) score++;
}
}
document.getElementById('score1').innerHTML = score;
document.getElementById('subtitle').style.display = 'none';
document.getElementById('main01').style.display = 'none';
document.getElementById('doctors').style.display = 'none';
document.getElementById('doctor_intro').style.display = 'none';
document.getElementById('ans1').style.display = 'block';
}
=============================================================================
q_idx這個變數在之前有設定值為１，我不太懂它是要幹麻的
可是這邊卻說它變３的話要讓分數歸零
但之前q_idx就是１，它哪會變成３呢？
這邊讓蠻多id屬性消失，變成id=ans1的跑出來
我看網頁它是進行到第四題的時候id=ans1會跑出來
=============================================================================
if(q_idx == 5){
var score2 = 0;
for(var j = 1 ; j <= 4; j++){
if(document.getElementById('q4' + '_' + j).checked) score2++;
}
document.getElementById('score2').innerHTML = score2;
var score3 = 0;
for(var j = 1 ; j <= 4; j++){
if(document.getElementById('q5' + '_' + j).checked) score3++;
}
document.getElementById('score3').innerHTML = score3;
document.getElementById('q' + q_idx).style.display = 'none';
document.getElementById('ans1').style.display = 'none';
document.getElementById('ans2').style.display = 'block';
//document.getElementById('ans_spacing2').style.height= '75px';
document.getElementById('form_block').style.display = 'block';
}else{
var no_ans_flg = true;
for(var j = 1 ; j <= 4; j++){
if(document.getElementById('q' + q_idx + '_' + j).checked) {
no_ans_flg = false;
break;
}
}
if(no_ans_flg){
alert('xxxxxxxxxxxx
================================================================================
推測這邊是進行到第四題 然後q_idx==5 還是不太懂是什麼@@
我看了一下它的題目總共有五題
而上面為何又要多出score2 score3變數也不太懂
跟著它的 no_ans_flg 應該是指假如使用者沒有作答嗎？
後來會跳出來的頁面是收集用戶資料頁 id="form_block"的div
也是上述程式中讓它出現的
===============================================================================
對這段code真的是一知半解的 不知道該怎麼看懂才好
新手入門 還請大家多多指點迷津 感激感激 m(__ __)m
另外不知道有沒有其它比較好懂的程式碼可以參考呢?
我google了一大堆 可是沒有找到我要的這種
(checkbox 積分制)_
試過的google key word:
javascript checkbox multiple selection score
Multiple Choice Quiz Javascript
Multiple Choice Questionnaire
JAVASCRIPT Multiple Choice checkbox
javascript calculate total checkbox
How to Create a Scored Survey
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 36.224.227.123
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1435790429.A.D44.html
1F：推 a73126: 看網頁code不要只看JS，HTML本身也要看...... 07/02 07:51
2F：→ a73126: 首先第一個問題，他的確是有勾+1分 07/02 07:51
3F：→ a73126: 再來，q_idx是會增加的，在所有if不成立的else內 07/02 07:52
4F：→ a73126: 善用搜尋先把變數在那些地方出現找出來 07/02 07:52
5F：→ a73126: 3的時候歸0有點trick...他到第三題才會把ans1 block顯示 07/02 07:57
6F：→ a73126: 也就是在此之前看不到分數，而他在第三題時統計分數迴圈 07/02 07:57
7F：→ a73126: 還是從第一題跑，所以要先把分數歸0 07/02 07:58
這邊我看不太懂耶，因為它作到第四題的時候才給１～３題的分數對嗎
那第三題統計分數為啥要從第一題跑呢＠＠
我看它的for迴圈是跑 q3_1 q3_2 q3_3 q3_4 有沒checked
所以應該沒有算到前面幾題的分數？
8F：→ a73126: 最後score2和3是獨立的變數，請注意HTML內有個div id=ans2 07/02 08:00
9F：→ a73126: 這裡面紀錄了環境因素，身體功能兩個分數分別是score2和3 07/02 08:01
10F：→ a73126: 而影響這個的是第四和第五題 07/02 08:01
喔喔喔這邊我看懂了的樣子!!! ^^ 感激感謝感恩!!!
11F：→ a73126: 更正q_idx題號增加的位置，不是所有if不成立的else 07/02 08:02
12F：→ a73126: 是當不是第五題的else內 07/02 08:02
耶我找到了 這裡嗎
document.getElementById('q' + q_idx).style.display = 'none';
q_idx++;
document.getElementById('q' + q_idx).style.display = 'block';
這裡應該指把上一題消失，顯示下一題?? 感謝~~~!!
但我不太懂這裡的else
var no_ans_flg = true;
for(var j = 1 ; j <= 4; j++){
if(document.getElementById('q' + q_idx + '_' + j).checked) {
no_ans_flg = false;
break;
}
}
if(no_ans_flg){
alert('XXXXXXXXXXXX亂碼');
return false;
}
那個迴圈為什麼要設 <=4 一共有五題說
謝謝幫助 受益良多~~~o(∩_∩)o
※ 編輯: Verdana (210.71.206.17), 07/02/2015 13:18:34
※ 編輯: Verdana (210.71.206.17), 07/02/2015 13:25:48
13F：推 pptinmylife: 推。。。。 07/02 18:59
14F：→ a73126: 他的for迴圈是雙層阿，所以是q1_1~q3_4 07/04 04:27
15F：→ a73126: 另外你不懂得else是用來判斷有沒有勾選的，前四題一定要回 07/04 04:28
16F：→ a73126: 答，第五題可以不勾選，你可以自己玩玩看 07/04 04:28
17F：→ a73126: 所以題號只到4 <=4來源在這 07/04 04:28
18F：→ a73126: 另外alert內不是亂碼，你的瀏覽檔案編碼設錯了，這是UTF-8 07/04 04:29