test - EWI Wikipedia

<!-- 総括エリア -->
<a name='soukatu' style='display:none;'></a>
<div id='soukatu' style='display:none;'></div>

<!-- スクリプト本体 -->
<script>
/*Todo
・Bloggerは外部のjavascriptが置けないので、素のjsのみで何とかする。
・soukatuはdisplay:none;で隠す。
・input要素にはvalueをいちいち付ける。それでチェックする。
・答え合せをしたら一番上まで画面が動くようにする。
*/

</script>
<script>
// グローバル変数を定義。
var tokuten = 0; // ユーザの得点。
var sousuu = 4; // 総問題数。
var soukatumsg = '';  // 答え合わせ後に表示するメッセージ。

// メイン的なやつ。
// 命名＝「js_basic_」＋「日目」。
function js_basic_01(){
// 初期化。
tokuten = 0;
// 問題ごとの関数を実行。
frm_js_basic_01_01();
frm_js_basic_01_03();
frm_js_basic_01_04();
// 総括の表示。
writeSoukatumsg();
window.location.hash='soukatu';
}

// 総括エリアにメッセージを表示。
// 得点に応じて変化する。
function writeSoukatumsg(){
var percent = Math.round(tokuten/sousuu*100);// 五段階評価。20%以下、50%以下、70%以下、90%以下、100%。
switch (true){
case percent<20:
soukatumsg = '\
操作ミスでなければ、ひどい点数です。もう一度動画を視聴して要点を把握しましょう。';
break;
case percent<50:
soukatumsg = '\
真面目にやってこれはいかがなものかというところです。\
もう一度動画を視聴して理解しきれていないところをチェックし直しましょう。';
break;
case percent<70:
soukatumsg = '\
この回は苦手と思われます。もう一度動画を視聴して理解を深めましょう。';
break;
case percent<90:
soukatumsg = '\
ほぼ理解で来ているようです。\
確認問題だけでよいので、もう一度再挑戦することをお薦めします。';
break;
case percent == 100:
soukatumsg = '\
満点！！さすがです。動画を完了にして次の問題に進みましょう。';
break;
default:
soukatumsg = '\
動画は3分程度で終わるものがほとんどです。たいして時間はかからないのですから、\
理解できるまで何度でも視聴するよう心がけにしましょう。';
}
document.getElementById('soukatu').style.display = 'block';
document.getElementById('soukatu').innerHTML = '今回の得点： ' + '<strong>' + tokuten + '/' + sousuu + '</strong><br>' + soukatumsg;
}
// リセットボタン。
function js_basic_01_clear(){
//
document.frm_js_basic_01_01.reset();
document.frm_js_basic_01_03.reset();
document.frm_js_basic_01_04.reset();
location.reload();
}
</script>

<!-- ***********************************HTML*********************************** -->

<!-- 多肢選択（単一回答） -->
<br>
<form name='frm_js_basic_01_01'>
<fieldset>
<legend>問題番号</legend>
<p>問題文</p>
<label><input type='radio' name='rdo'>選択肢1</label><br>
<label><input type='radio' name='rdo'>選択肢2</label><br>
<label><input type='radio' name='rdo'>選択肢3</label><br>
</fieldset>
<div id='frm_js_basic_01_01_ox'style='display:none;'>
</div>
<div id='frm_js_basic_01_01_kaisetu' style='display:none;'>
正解は<span style='color:green;font-weight:bold;'>●正解番号</span>です。<br>
<h3>解説</h3>
●解説文
</div>
</form>
<script>
function frm_js_basic_01_01(){
// ラジオボタン。
var path = document.frm_js_basic_01_01.rdo; // フォームへのパス。
var pathtoox = document.getElementById('frm_js_basic_01_01_ox'); // ◯ × （正解/不正解）を表示する領域へのパス。
var pathtokaisetu = document.getElementById('frm_js_basic_01_01_kaisetu'); // 解説を表示する領域へのパス。
var seikai = 0; // 正解の選択肢番号。

// 正誤判断。
for(var i = 0;i<path.length;i++){
if(path[seikai].checked){
tokuten++; // 変数tokutenに1追加。
pathtoox.innerHTML = '正解です！！ <br>';
break;
}else{
pathtoox.innerHTML = '不正解です・・・<br>';
}
}
// OXエリアを表示。
pathtoox.style.display = 'block';
// 解説エリアを表示。
pathtokaisetu.style.display = 'block';
}
</script>

<!-- 穴埋 -->
<br>
<form name='frm_js_basic_01_03'>
<fieldset>
<legend>問題番号</legend>
<p>問題文</p>
前文<input type='text' name='tbx'>後文<br>
</fieldset>
<div id='frm_js_basic_01_03_ox' style='display:none;'></div>
<div id='frm_js_basic_01_03_kaisetu' style='display:none;'>
解説文
</div>
</form>
<script>
// 穴埋め問題
function frm_js_basic_01_03(){
var path = document.frm_js_basic_01_03.tbx; // フォームへのパス。
var pathtoox = document.getElementById('frm_js_basic_01_03_ox'); // ◯ × を表示する領域へのパス。
var pathtokaisetu = document.getElementById('frm_js_basic_01_03_kaisetu'); // 解説を表示する領域へのパス。
var seikai = '正解の文字'; // 正答。

// 正誤判断。
if(path.value == seikai){
tokuten++;
pathtoox.innerHTML = '◯';
}else{
pathtoox.innerHTML = '×';
}
// 解説エリアを表示。
pathtokaisetu.style.display = 'none';
}
</script>

<br>
<!-- O／X問題 -->
<form name='frm_js_basic_01_04'>
<fieldset>
<legend>問題番号</legend>
<p>問題文</p>
<input type='radio' name='rdo'>◯<br>
<input type='radio' name='rdo'>×<br>
</fieldset>
<div id='frm_js_basic_01_04_ox'></div>
<div id='frm_js_basic_01_04_kaisetu' style='height:1px;visibility:hidden;'>
解説文
</div>
</form>
<script>
// ◯×問題
function frm_js_basic_01_04(){
var path = document.frm_js_basic_01_04.rdo; // フォームへのパス。
var pathtoox = document.getElementById('frm_js_basic_01_04_ox'); // ◯ × （正解/不正解）を表示する領域へのパス。
var pathtokaisetu = document.getElementById('frm_js_basic_01_04_kaisetu'); // 解説を表示する領域へのパス。
var seikai = '◯'; // 正解（◯ か× ）。
// 正誤判断。
// 0＝＝◯  1＝＝× 。
if(path[0].checked){
tokuten++; // 変数tokutenに1追加。
pathtoox.innerHTML = '◯ ';
}else{
pathtoox.innerHTML = '× ';
}
// 解説エリアを表示。
pathtokaisetu.style.display = 'none';
}
</script>

<!-- 答え合わせボタン -->
<br>
<button type='button' onClick='js_basic_01();'><b>答え合わせ</b></button>
<!-- リセット -->
<button onClick='js_basic_01_clear();'>リセット</button>