javascriptで質問に答えていきながら、最終的に診断結果を表示させるという
簡単な診断テストを作りたいと思います。
■診断テストの動き詳細
【１ページ目】
Ｑ質問だよ
Ａ
選択肢１
選択肢２
選択肢３
【２ページ目】
Ｑ質問だよ
Ａ
選択肢１
選択肢２
選択肢３
【３ページ目】
Ｑ質問だよ
Ａ
選択肢１
選択肢２
選択肢３
↓
【結果ページ】
選択した選択肢によって、
それぞれの結果ページを表示する
-----------------
それでは早速作ってみたいと思います！
まずは、index.htmlを作成。
htmlファイルの中身はこんな感じ。
■index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>サンプル診断</title>
</head>
<body>
<script type="text/javascript">
var m = 0;
window.onload=function() {
document.getElementById("box2").style.display="none";
document.getElementById("box3").style.display="none";
document.getElementById("box4").style.display="none";
document.getElementById("kekka1").style.display="none";
document.getElementById("kekka2").style.display="none";
document.getElementById("kekka3").style.display="none";
}
function clickTest0(evt){
t=evt.target || evt.srcElement;
if(t.className == "list1") {
m = m + 1;
}
if(t.className == "list2") {
m = m + 2;
}
if(t.className == "list3") {
m = m + 3;
}
}
function clickTest1(evt){
t=evt.target || evt.srcElement;
document.getElementById("box1").style.display="none";
document.getElementById("box2").style.display="";
}
function clickTest2(evt){
t=evt.target || evt.srcElement;
document.getElementById("box2").style.display="none";
document.getElementById("box3").style.display="";
}
function clickTest3(evt){
t=evt.target || evt.srcElement;
document.getElementById("box3").style.display="none";
}
function clickTest3(evt){
t=evt.target || evt.srcElement;
document.getElementById("box3").style.display="none";
if( m < 10 ){
document.getElementById("kekka1").style.display="";
} else if (m < 12) {
document.getElementById("kekka2").style.display="";
} else {
document.getElementById("kekka3").style.display="";
}
}
</script>
<div id="box1">
<center>
質問１
<ul>
<li id="clickTest" onClick='clickTest1(event),clickTest0(event);' >選択１</li>
<li id="clickTest" onClick='clickTest1(event),clickTest0(event);' >選択２</li>
<li id="clickTest" onClick='clickTest1(event),clickTest0(event);' >選択３</li>
</ul>
</div>
<div id="box2">
質問２
<ul>
<li id="clickTest" onClick='clickTest2(event),clickTest0(event);' >選択１</li>
<li id="clickTest" onClick='clickTest2(event),clickTest0(event);' >選択２</li>
<li id="clickTest" onClick='clickTest2(event),clickTest0(event);' >選択３</li>
</ul>
</div>
<div id="box3">
質問３
<ul>
<li id="clickTest" onClick='clickTest3(event),clickTest0(event);' >選択１</li>
<li id="clickTest" onClick='clickTest3(event),clickTest0(event);' >選択２</li>
<li id="clickTest" onClick='clickTest3(event),clickTest0(event);' >選択３</li>
</ul>
</div>
<div id="kekka1">
結果１
</div>
<div id="kekka2">
結果２
</div>
<div id="kekka3">
結果３
</div>
</body>
</html>
---
■それではちょっと説明したいと思います！
var m = 0;
まずは選択肢をクリックしたときに、
ポイントを計算するための変数を用意します。
window.onload=function() {
document.getElementById("box2").style.display="none";
document.getElementById("box3").style.display="none";
document.getElementById("box4").style.display="none";
document.getElementById("kekka1").style.display="none";
document.getElementById("kekka2").style.display="none";
document.getElementById("kekka3").style.display="none";
}
画面を読み込んだときに、質問２以降の項目と、
結果の項目を非表示に設定します。
onClick='clickTest1(event),clickTest0(event);'
ＨＴＭＬの部分でクリックしたときにどのアクションを起こすかを指定します。
イベントは「,」で区切ればいくつでも指定することが出来ます。
function clickTest0(evt){
t=evt.target || evt.srcElement;
if(t.className == "list1") {
m = m + 1;
}
if(t.className == "list2") {
m = m + 2;
}
if(t.className == "list3") {
m = m + 3;
}
}
選択肢ごとでポイントを加算していきます。
「evt.target」はＩＥでは効かないので、ＩＥ、クロム、firefoxで対応させるには
「t=evt.target || evt.srcElement;」
こんな風に書かないといけません。
function clickTest1(evt){
t=evt.target || evt.srcElement;
document.getElementById("box1").style.display="none";
document.getElementById("box2").style.display="";
}
選択肢を選んだときに、質問１の表示を消し、
質問２を表示させます。
function clickTest3(evt){
t=evt.target || evt.srcElement;
document.getElementById("box3").style.display="none";
if( m < 10 ){
document.getElementById("kekka1").style.display="";
} else if (m < 12) {
document.getElementById("kekka2").style.display="";
} else {
document.getElementById("kekka3").style.display="";
}
}
質問３のところは、
最後結果を表示させるため、if条件文を使って結果ページを表示させます。
「style.display="";」
このように何も指定しないと、その項目が表示されます。
ぜひいろいろカスタマイズして使ってみてくださいー！
0 件のコメント:
コメントを投稿