作者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/cn.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