はてなブログの１つの記事の中で２つのjavascript4択問題を動かす方法

解決済

質問者：guildd55nt101
質問日時：2017/07/20 11:10
回答数：2件

javascript超初心者です。

はてなブログの１つの記事の中で
英単語の4択問題（javascriptで出題）
解説
英文法の4択問題（javascriptで出題）
解説

というふうにしたいのですが、１つめのjavascriptはちゃんと動くのですが、
２つめのjavascriptをこぴぺして問題だけを変えて、プレビューで確認すると
1つめの単語4択問題に２つめの英文法問題が出題されてしまいます。
解決策を教えてください。

英単語4択のjavascriptは、以下です。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>本日の単語</title>
</head>
<body>
<h1>本日の単語</h1>
<hr>
<h2>問題</h2>
<div id="text_q"></div>
<h2>選択</h2>
<div id="text_s"></div>
<h2>解答</h2>
<div id="text_a"></div>

<script type="text/javascript">
//問題と解答
qa = new Array();
qa[0] = ["改善する","represent","improve","approve","prove",2];
qa[1] = ["～と考える","consequent","confirm","consider","configure",3];
qa[2] = ["～を含む","include","increase","injure","indeed",1];
qa[3] = ["～を許す","allow","arrow","below","fellow",1];
qa[4] = ["～のように見える","appeal","appear","disappear","disappoint",2];
qa[5] = ["～について述べる","climb","subscribe","describe","deprive",3];
qa[6] = ["励ます","college","courage","encounter","encourage",4];
qa[7] = ["減らす","regain","reduce","refuse","retrieve",2];
qa[8] = ["比較する","complex","complete","compare","company",3];
qa[9] = ["提案する","suppose","supply","support","suggest",4];

//初期設定
q_sel = 4; //選択肢の数
setReady();

//初期設定
function setReady() {
count = 0; //問題番号
ansers = new Array(); //解答記録

//最初の問題
quiz();
}

//問題表示
function quiz() {
var s, n;
//問題
document.getElementById("text_q").innerHTML = (count + 1) + "問目：" + qa[count][0];
//選択肢
s = "";
for (n=1;n<=q_sel;n++) {
s += "【<a href='javascript:anser(" + n + ")'>" + n + "：" + qa[count][n] + "</a>】";
}
document.getElementById("text_s").innerHTML = s;
}
//解答表示
function anser(num) {
var s;
s = (count + 1) + "問目：";
//答え合わせ
if (num == qa[count][q_sel + 1]) {
//正解
s += "○" + qa[count][num];
ansers[count] = "○";
} else {
s += "×" + qa[count][num];
ansers[count] = "×";
}
document.getElementById("text_a").innerHTML = s;

//次の問題を表示
count++;
if (count < qa.length) {
quiz();
} else {
//終了
s = "<table border='2'><caption>成績発表</caption>";
//1行目
s += "<tr><th>問題</th>";
for (n=0;n<qa.length;n++) {
s += "<th>" + (n+1) + "</th>";
}
s += "</tr>";
//2行目
s += "<tr><th>成績</th>";
for (n=0;n<qa.length;n++) {
s += "<td>" + ansers[n] + "</td>";
}
s += "</tr>";
s += "</table>";
document.getElementById("text_q").innerHTML = s;
//次の選択肢
s　= "【<a href='javascript:setReady()'>同じ問題を最初から</a>】";
document.getElementById("text_s").innerHTML = s;
}
}

</script>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： Ogre7077
回答日時：2017/07/20 16:55

HTML とスクリプトの両方を、複数セットに対応できるように書き直すしかありません。

以下サンプルです。

<h1>本日の単語</h1>
<section class=sec-question data-name=set1></section>

<h1>明日の単語</h1>
<section class=sec-question data-name=set2></section>

<script>
(function(_){
// 問題
var questions = {
set1: [
["こんにちは","n'cha","baicha","uhohooyi","ayaya",1],
["おはよう","tsuoi","ohakonbanchiwa","kakkuyi","keeen",2],
["はい","wakuwaku","hoyoyo","mechanko","hooyi",4],
],
set2: [
["世は事も無し","ajapa","koredeiinoda","hantainosansei","konyanyachiwa",2],
["こんにちは","sheeeee","dayooon","odekakedesuka","teyande",3],
["感嘆","acchonburike","omukaedegonsu","lalala","hyoutantsugi",1],
],
};
// 便利
function Q(sel,p){return (p?p:document).querySelector(sel)}
function QQ(sel,p){return Array.prototype.slice.apply((p?p:document).querySelectorAll(sel))}
function E(name,txt){var e = document.createElement(name); if(txt) e.textContent = txt; return e}
function C(elem){while (elem.firstChild) elem.removeChild(elem.firstChild); return elem}
// 初期処理
window.addEventListener('DOMContentLoaded',function(){
QQ('.sec-question').forEach(function(sec){
var name = sec.dataset.name; if (!questions[name]) return;
while (sec.firstChild) sec.removeChild(sec.firstChild);
sec.appendChild(E('h2', '問題'));
sec.appendChild(E('div')).className = 'textQ';
sec.appendChild(E('h2', '選択'));
sec.appendChild(E('div')).className = 'textS';
sec.appendChild(E('h2', '回答'));
sec.appendChild(E('div')).className = 'textA';
sec.dataset.count = 0;
sec.dataset.answers = '';
serviceNextQuestion(name);
});
},false);
// イベント処理
window.addEventListener('click',function(ev){
var a = ev.target; if (!a || !a.href) return;
for (var sec = ev.target; sec && sec.className != 'sec-question'; sec = sec.parentNode);
if (!sec) return;
var m, cmd = a.getAttribute('href');
if (m = /^#answer-(\d+)$/.exec(cmd)) {
ev.preventDefault();
var i = parseInt(m[1]);
var name = sec.dataset.name;
var no = parseInt(sec.dataset.count);
if (!questions[name] || !questions[name][no]) return;
var q = questions[name][no];
var res = (q[q.length-1] == i)? '○': '×';
Q('.textA',sec).textContent = res + ' ' + q[i];
sec.dataset.count = no+1;
sec.dataset.answers += res;
if (sec.dataset.count < questions[name].length) {
serviceNextQuestion(name);
} else {
displayResult(name);
}
} else if (m = /^#onemore$/.exec(cmd)) {
ev.preventDefault();
C(Q('.textQ',sec));
C(Q('.textS',sec));
C(Q('.textA',sec));
sec.dataset.count = 0;
sec.dataset.answers = '';
serviceNextQuestion(sec.dataset.name);
}
},false);
// 出題
function serviceNextQuestion(name) {
QQ('.sec-question').filter(function(e){return e.dataset.name == name}).forEach(function(e){
var no = parseInt(e.dataset.count);
var q = questions[name][no];
Q('.textQ',e).textContent = (no+1) + "問目：" + q[0];
var s = C(Q('.textS',e));
for (var i=1; i<q.length-1; i++) {
s.appendChild(E('span','【'));
s.appendChild(E('a', i + ':' + q[i])).href = '#answer-@'.replace(/@/,i);
s.appendChild(E('span','】'));
}
});
}
// 集計処理
function displayResult(name) {
QQ('.sec-question').filter(function(e){return e.dataset.name == name}).forEach(function(e){
var res = e.dataset.answers;
var t = C(Q('.textQ',e)).appendChild(E('table'));
t.border = true;
t.appendChild(E('caption','成績発表'));
var rh = t.appendChild(E('tr')); rh.appendChild(E('th','問題'));
var rd = t.appendChild(E('tr')); rd.appendChild(E('th','成績'));
for (var i=0; i<res.length; i++) {
rh.appendChild(E('td', i+1));
rd.appendChild(E('td', res.charAt(i)));
}
C(Q('.textS',e)).appendChild(E('a','同じ問題を最初から')).href = '#onemore';
});
}
})();
</script>

- 0
- 件

通報する

この回答へのお礼

助かりました

動きました！ありがとうございました！！

通報する

お礼日時：2017/07/20 18:28

参考程度に

No.1

回答者： fujillin
回答日時：2017/07/20 14:16

こんにちは

うまくいかないという内容が提示されていないので、想像だけの回答になりますが・・・

＞こぴぺして問題だけを変えて、～～
文字通りに問題の内容だけ変えたとすれば、変数名等はそのままだと想像できますので、後からの内容に上書きされているだけではないのでしょうか？

「2つの問題」というのが、表示上も独立して2種類の問題が動作するようにしたいのか、同じ表示部分を利用して（問題数が増えたような状態で）、連続して次の問題が出題されるようにしたいのかがよくわかりません。

もしも前者であるなら、HTML要素ももう1セット必要になりますし、それに対して動作するスクリプトが必要になります。
コピペしないで、全体を効率良く作成する方法もあると思いますが、とりあえず、コピペでもう１セット作成して、変数名や要素のID等をそれぞれ別のものにしておくのが簡単でしょう。

もしも後者であるなら、qa[10}～[19]に問題を追加して、10問を区切りとして集計結果を表示するようにすれば済むのかもしれません。
（どのようになさりたいのか、いまいちよくわからないので、何とも言えません）