javascriptで間違えた問題だけをCSVファイルに保存したい

前提・実現したいこと
javascriptで間違えた問題だけをCSVファイルに保存したい
発生している問題・エラーメッセージ
間違えた問題が１問だけしか保存されない

該当のソースコード

javascript
1<!DOCTYPE HTML>
2<html>
3<head>
4<meta charset="utf-8">
5<title>三択クイズ</title>
6</head>
7<body>
8<h1>クイズひな形</h1>
9<hr>
10
11<span id="001"></span>
12
13<h2>問題</h2>
14<div id="text_q"></div>
15<h2>選択</h2>
16<div id="text_s"></div>
17<h2>解答</h2>
18<div id="text_a"></div>
19
20
21<script type="text/javascript">
22
23
24    
25    
26    
27    
28    
29    
30    
31    
32//問題と解答
33qa = new Array();
34qa[0] = ["イルカを漢字で書くとどれ？","海豚","海牛","河豚",1];
35qa[1] = ["クラゲを漢字で書くとどれ？","水浮","水母","水星",2];
36qa[2] = ["カタツムリを漢字で書くとどれ？","禍牛","鍋牛","蝸牛",3];
37qa[3] = ["バッタを漢字で書くとどれ？","飛蝗","飛蟻","飛脚",1];
38qa[4] = ["タツノオトシゴを英語にするとどれ？","sea fish","sea horse","sea dragon",2];
39qa[5] = ["マグロを英語にするとどれ？","funa","suna","tuna",3];
40qa[6] = ["トンボを英語にするとどれ？","fly","dragonfly","butterfly",2];
41qa[7] = ["ヒトデを英語にするとどれ？","starfish","starshell","starmine",1];
42qa[8] = ["恒星の中で最も明るい星は？","デネブ","スピカ","シリウス",3];
43qa[9] = ["惑星の中で最も重たいのはどれ？","太陽","木星","天王星",2];
44
45
46function run(){ //randomの生成
47for (var i = qa.length-1; i>=0; i--){
48var rand = Math.floor(Math.random() * (i+1));
49var temp = qa[i];
50qa[i] = qa[rand]
51qa[rand] = temp;
52document.getElementById("001").innerHTML = i + "回目= " + qa;
53quiz(qa);
54    
55    
56    
57}
58}
59
60
61//初期設定
62q_sel = 3; //選択肢の数
63setReady(qa);
64
65function setReady() {//初期設定
66count = 0; //問題番号
67ansers = new Array(); //解答記録
68run(); //再テストの場合のランダムの生成
69quiz(); //最初の問題
70}
71function quiz() { //問題表示
72var s, n;
73//問題
74document.getElementById("text_q").innerHTML = (count + 1) + "問目：" + qa[count][0];
75//選択肢
76s = "";
77for (n=1;n<=q_sel;n++) {
78s += "【<a href='javascript:anser(" + n + ")'>" + n + "：" + qa[count][n] + "</a>】";
79}
80document.getElementById("text_s").innerHTML = s;
81}
82    
83
84    
85function anser(num) { //解答表示
86var s;
87s = (count + 1) + "問目：";
88//答え合わせ
89if (num == qa[count][q_sel + 1]) {
90//正解
91ansers[count] = "○";
92} else {
93ansers[count] = "×";
94}
95s += ansers[count] + qa[count][num];
96document.getElementById("text_a").innerHTML = s;
97    
98        
99
100    
101    var TempData 
102    
103    TempData.push(qa);
104    
105       var str = "";
106var len_qa =Object.keys(TempData[0]).length;
107  for(var i = 0; i<len_qa; i++){
108      
109      
110      alert(qa);
111      
112      
113	if(i==0){
114		str += "Temp,"+qa[i] +",";
115        
116        
117	}else if(i==len_qa-1){
118		str += TempData[i]+"\n"; //Satで改行する
119	}else{
120		str += TempData[i]+","; //カンマで区切る
121	}
122}
123    alert(s);
124  console.log(s);  
125    
126    var blob =new Blob([s],{type:"text/csv"}); //配列に上記の文字列(s)を設定
127
128
129    
130var link =document.createElement('a');
131link.href = URL.createObjectURL(blob);
132link.download ="tempdate.csv";
133link.click();
134    
135//次の問題を表示
136count++;
137if (count < qa.length) {
138quiz();
139} else {
140//終了
141s = "<table border='2'><caption>成績発表</caption>";
142//1行目
143s += "<tr><th>問題</th><th>成績</th></tr>";
144for (n=0;n<qa.length;n++) {
145s += "<tr><td>" + (n+1) + "</td><td>" + ansers[n] + "</td><tr>";
146}
147
148    
149    
150    
151s += "</table>";
152document.getElementById("text_q").innerHTML = s;
153//次の選択肢
154s = "【<a href='javascript:history.back()'>前のページに戻る</a>】";
155
156    
157s += "【<a href='javascript:setReady()'>同じ問題を最初から</a>】";
158s += "【<a href=''>次の問題に進む</a>】";
159document.getElementById("text_s").innerHTML = s;
160}
161}
162</script>
163</body>
164</html>

自分で調べたことや試したこと

（追加）配列の中身を確認しました。
alert(qa[num]);
//問題文　トンボを英語にするとどれ？,fly,dragonfly,butterfly,2

alert(qa[count][num]);
//答え　tuna
alert(ansers[count]);
//×か○

(追加）
複数ファイルのダウンロードを許可が表示されます。
以下のコード追加で。

    for (n=0;n<qa.length;n++) {
s+=qa[num] + qa[count][num];
 
    var blob =new Blob([s],{type:"text/csv"}); //配列に上記の文字列(s)を設定
    
var link =document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download ="tempdate.csv";
link.click();
      }

（追加）
var str = "";
str += qa[count][num]+","; //カンマで区切る

(追加）

(追加）関数を修正しました。
function anser(num) { //解答表示
var s;
s = (count + 1) + "問目：";

//alert(qa[count][q_sel + 1]);

//答え合わせ
if (num == qa[count][q_sel + 1]) {
//正解
ansers[count] = "○";
} else {
ansers[count] = s+qa[count][num];
// const arr=[];
// arr.push("Red", "Green", "Blue")

//     alert(arr);

}

配列のpushの使い方で悩んでいます。
function Seito(_namae, _seiseki) {
this.namae = _namae;
this.seiseki = _seiseki;
}
var kumi=[];
kumi[0]=new Seito(data1,95);
kumi[1]=new Seito(data2,73);
kumi[2]=new Seito(data3,86);
for(i=0;i<kumi.length;i++){
document.write(kumi[i].namae+"："+kumi[i].seiseki+"点<br>");
}

結果
const data1 = ansers[count]
const data2 = ['d', 'e', 'f'];

1問目：飛脚：95点
d,e,f：73点
d,e,f：86点

間違えた問題だけを連続でカンマ区切りで最終的にはすべての間違えた問題だけをCSVで
保存したいです。
よろしくお願いします。

yambejp

2022/04/07 09:33 編集

具体的にどういうCSVになればよいのですか？

BeatStar

2022/04/07 10:18

> 解答を配列で保存しようとしているけれどもうまくいかないです。うまくいかない、とは？状況によって変わります。それを「できない」とだけ言われても困りますよ。

believe

2022/04/07 10:56

間違えた解答を配列で一時保存してCSV形式ですべての間違えた問題だけを最終的にリンクからダウンロードさせたいです。現状は問題を間違えると、「1問目：×河豚」と一件だけCSVで保存されます。それを「1問目：×河豚,3問目：×starmine,4問目：×水星,-5問目---,--------]のような形式でtempdate.csvでダウンロードさせたいです。最後の問題を解き終えたときに。よろしくお願いします。

yambejp

2022/04/07 11:01 編集

> 1問目：×河豚,3問目：×starmine,4問目：×水星,-5問目---,-------- これはCSV形式ではないですが？問題番号と間違えた答えの組み合わせということですかね？（そもそも間違えだけ出力するなら×表示はいらないですね） "1問目","河豚" "3問目","starmine" "4問目","水星" ・・・・って形式でよいのでしょうか？それと保存というのは保存用の確認ダイアログをだせばいいのでしょうか？

believe

2022/04/07 21:41

はい、"1問目","河豚" "3問目","starmine" "4問目","水星" ・・・・って形式でいいです。＞それと保存というのは保存用の確認ダイアログをだせばいいのでしょうか？はい、最終的に確認ダイアログが出てほしいです。よろしくお願いします。

believe

2022/04/08 23:51

>CSV出力のところ理解されたという前提でよろしいですね？理解できていません。現状では[配列１,配列1]となっています、 [配列１,配列２]にしたいのですが、for文の繰り返しが理解できていません、１問目の答えが２つ続いた状態で表示されます。 [１問目の答え、２問目の答え]になっていません。 //間違えた問題を配列に入れる for (n=1;n<=1;n++) { //答え alert(qa[count][n]); //一問目　alert(s); //選択肢　alert(num); // var arr = [s]+qa[count][n]; //3問目：禍牛, 2問目：fly, //alert(arr); // let a1 = arr.concat(qa[count][num] +","); //console.log(a1); //=> [1, 2, 3, 4, 5, 6, 7] const arr=[]; arr.push(s,qa[count][num]); //2問目：,天王星 alert(arr); arr.push("Red", "Green", "Blue") for (var i = qa.length+1; i<=0; i++){ arr.push(s,qa[count][n]); } //arr[][i]; //2問目：,天王星,Red,Green,Blue alert(arr); よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

処理を２つに分けて考えてください
(1)間違いデータを配列におさめる
(2)配列をcsvデータで出力する

今回は(1)は割愛します
こんな感じの配列を自力でつくってください

CSV
1  const data=[
2  ["1問目","河豚"],
3  ["3問目","starmine"],
4  ["4問目","水星"],
5  ];

まず単純にCSVで保存する方法

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  const data=[
4  ["1問目","河豚"],
5  ["3問目","starmine"],
6  ["4問目","水星"],
7  ];
8  btn.addEventListener('click',()=>{
9    const csv= data.map(x=>JSON.stringify(x).replace(/^\[|\]$/g,'')).join("\n");
10    const blob = new Blob([csv], {type: 'text/csv'});
11    const a=Object.assign(document.createElement('a'),{
12      'href':URL.createObjectURL(blob),
13      'download': 'test.csv',
14    });
15    document.body.appendChild(a);
16    a.click();
17    a.remove();
18  });
19});
20</script>
21<input type="button" id="btn" value="download">

CSVを直接excelで開きたい場合などはutf8→sjis変換が必要です
文字コード変換には適当なライブラリを利用しましょう。
今回はEncoding.jsを使います

javascript
1<script src="https://cdnjs.cloudflare.com/ajax/libs/encoding-japanese/2.0.0/encoding.min.js"></script>
2<script>
3window.addEventListener('DOMContentLoaded', ()=>{
4  const data=[
5  ["1問目","河豚"],
6  ["3問目","starmine"],
7  ["4問目","水星"],
8  ];
9  btn.addEventListener('click',()=>{
10    const csv= data.map(x=>JSON.stringify(x).replace(/^\[|\]$/g,'')).join("\n");
11    const blob = new Blob([new Uint8Array(Encoding.convert(Encoding.stringToCode(csv), 'sjis', 'unicode'))], {type: 'text/csv'});
12    const a=Object.assign(document.createElement('a'),{
13      'href':URL.createObjectURL(blob),
14      'download': 'test.csv',
15    });
16    document.body.appendChild(a);
17    a.click();
18    a.remove();
19  });
20});
21</script>
22<input type="button" id="btn" value="download">

投稿2022/04/08 01:37

yambejp

総合スコア114839

believe

2022/04/08 03:17

//間違えた問題を配列に入れる for (n=1;n<=1;n++) { var arr = [s]+qa[count][n]+","; let a1 = arr.concat(qa[count][num][n]+","+qa[count][num]++); console.log(a1); //=> [1, 2, 3, 4, 5, 6, 7] alert(a1); } } この行みたいに６，７の代わりに間違えた問題を随時、追加していきたいのですけれども let a1 = arr.concat([6, 7]); この記述だと２件までしか追加できません。 let a1 = arr.concat(qa[count][num][n]+","+qa[count][num]++); for文のカウントで悩んでいます。よろしくおねがいします。

yambejp

2022/04/08 03:38 編集

CSV出力のところ理解されたという前提でよろしいですね？ arrは間違った問題数分要素数を増やす必要があります const arr=[]; //1問目が河豚で間違えたなら arr.push(["1問目","河豚"]); //3問目がstarmineで間違えたなら arr.push(["3問目","starmine"]);

believe

2022/04/09 03:58 編集

関数の作り方で悩んでいます。このやり方だと☓の場所に不正解が表示されます。 function anser(num) { //解答表示 var s; s = (count + 1) + "問目："; //alert(qa[count][q_sel + 1]); //答え合わせ if (num == qa[count][q_sel + 1]) { function anser(num) { //解答表示 var s; s = (count + 1) + "問目："; if (num == qa[count][q_sel + 1]) { //正解 ansers2[count] = "○"; } else { ansers2[count] = qa[count][num]; } for (n=0;n<qa.length;n++) { s += "<tr><td>" + (n+1) + "</td><td>" + ansers[n] + "</td><tr>"; console.log(s); }

believe

2022/04/09 05:09

pushで悩んでいます。これはうまくいきますけれども、 const data1 = [1, 2, 3]; const data2 = ['d', 'e', 'f']; data1.push(data2); alert(data1); これは構文エラーになります。 const data1 = ansers[count] const arr=[]; arr.push(ansers[count],ansers[count]);

believe

2022/04/09 05:17 編集

エラー名　Uncaught TypeError: data1.push is not a function const data1 = ansers[count] //const arr=[]; arr.push(ansers[count],ansers[count]); //const data1 = [1, 2, 3]; const data2 = ['d', 'e', 'f']; data1.push(data2);

行動規範の内容に同意します