![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
javascript超初心者です。
はてなブログの1つの記事の中で
英単語の4択問題(javascriptで出題)
解説
英文法の4択問題(javascriptで出題)
解説
というふうにしたいのですが、1つめのjavascriptはちゃんと動くのですが、
2つめのjavascriptをこぴぺして問題だけを変えて、プレビューで確認すると
1つめの単語4択問題に2つめの英文法問題が出題されてしまいます。
解決策を教えてください。
英単語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>
No.2ベストアンサー
- 回答日時:
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>
No.1
- 回答日時:
こんにちは
うまくいかないという内容が提示されていないので、想像だけの回答になりますが・・・
>こぴぺして問題だけを変えて、~~
文字通りに問題の内容だけ変えたとすれば、変数名等はそのままだと想像できますので、後からの内容に上書きされているだけではないのでしょうか?
「2つの問題」というのが、表示上も独立して2種類の問題が動作するようにしたいのか、同じ表示部分を利用して(問題数が増えたような状態で)、連続して次の問題が出題されるようにしたいのかがよくわかりません。
もしも前者であるなら、HTML要素ももう1セット必要になりますし、それに対して動作するスクリプトが必要になります。
コピペしないで、全体を効率良く作成する方法もあると思いますが、とりあえず、コピペでもう1セット作成して、変数名や要素のID等をそれぞれ別のものにしておくのが簡単でしょう。
もしも後者であるなら、qa[10}~[19]に問題を追加して、10問を区切りとして集計結果を表示するようにすれば済むのかもしれません。
(どのようになさりたいのか、いまいちよくわからないので、何とも言えません)
ありがとうございます。
やりたいのは前者の「2つの問題が表示上も独立して見えるように」です。
その際の「HTML要素もう1セット」と「それに対して動作するスクリプト」というのを
どのようにすればいいかわかりません。
お手数でなければ教えていただけないでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
オブジェクトの中のプロパティ...
-
<s:iterator>の値をリストで取...
-
iterateで受け取った値を処理に...
-
PropertyNotFoundException解決...
-
JSPでImportエラーになります
-
Spring2.0での連続したトランザ...
-
Struts2 selectタグのmultiple...
-
StrutsでJSPからListを受け取り...
-
requestの値が削除されません…
-
JSP DB 表示
-
Java Struts ~に対するゲッタ...
-
java strutsでの一覧表の表示方...
-
【struts】 ActionFormで別のAc...
-
入力チェックとエラーメッセー...
-
JSPでDBからデータ読み込みブラ...
-
hiddenの値が期待した値で取得...
-
1ページに10件ずつ表示したい
-
JSPでの文字列編集出力
-
JSPからServletに、テーブルに...
-
【C#】ハッシュテーブル(連想...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
オブジェクトの中のプロパティ...
-
StrutsでJSPからListを受け取り...
-
JSPでImportエラーになります
-
Java Struts ~に対するゲッタ...
-
JSPからServletに、テーブルに...
-
hiddenの値が期待した値で取得...
-
<s:iterator>の値をリストで取...
-
全取得したデータをjspで順番に...
-
PropertyNotFoundException解決...
-
JSPにて、変数を利用してフォン...
-
JSPでDBからデータ読み込みブラ...
-
requestの値が削除されません…
-
入力チェックとエラーメッセー...
-
【struts】 ActionFormで別のAc...
-
iterateで受け取った値を処理に...
-
【Struts】bean:writeタグのpro...
-
No such validation エラー
-
データベースに変数の値を挿入
-
javaの環境変数の%CATALINA_HOM...
-
StrutsのforEachについて
おすすめ情報