diff --git a/data.csv b/data.csv index 7c0cdd5..b1a42f7 100644 --- a/data.csv +++ b/data.csv @@ -2,3 +2,9 @@ パンはパンでも食べられないパンは,フライパン,フライパンパンなら食べられる みかんはどこにある,アルミ缶の上,アルミ缶の上にあるみかん 山・川チョコボを作るのに要る実は,カラブの実,カップリング前にセーブをね! +「群馬くん○○食いすぎ船頭気分だジョ」○○に入るのは,イワシ,岩宿遺跡は先土器文化だじょ +世紀末大革命恋愛大皿左巻きはいくら,5万円,半角斎先生謹製 +なんと読む「鰰」,はたはた,男鹿水族館GAOへGO +ゼビウスで地面から生えてくるのは,ソル,戦闘機はソルバルウ +丸池様脇を流れる牛渡川水中に咲く花は,バイカモ,梅花藻と書き梅の花のように見える +↑↑↓↓←→←→BA 初出は?,グラディウス,KANGEKI OMIGOTO NAKANAKA NIKUINIKUI ANTAWASUGOI MIAGETAMONDA IUKOTONAINE diff --git a/index.html b/index.html index ece9de7..672cf46 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,6 @@ Using Example of csv-min.js - @@ -14,10 +13,21 @@ 使いやすいDaoDeCyrus/CSV の応用例。

+

CSVファイルの1行目をカラム名にしておくと、 +このHTML文書内の id="__カラム名__" の中身がそれに置き換わる。

-

+

+ + +

-
-yuuji +

問題

+

ここに quiz カラムの値が入る

+ +

こたえ

+

ここに answer カラムの値が入る

+ +

解説

+

ここに note カラムの値が入る

diff --git a/mycsvload.js b/mycsvload.js index 4c2062c..ce23f53 100644 --- a/mycsvload.js +++ b/mycsvload.js @@ -1,14 +1,38 @@ (() => { - var quiz = []; - var csvfile = "data.csv"; - function init() { - fetch(csvfile, { - - }).then((resp) => {return resp.json();}).then((j) => { - var - });; + var quiz = [], // 読み取ったCSV全てが入る配列 + nQuiz, // データの個数(quiz.lengthのまま使ってもよい) + pos=0; // 現在の配列の添字位置 + var csvfile = "data.csv"; // CSVデータファイル名 + function putValues(row) { + // CSVの1行分のJSONがrowに入る + for (let key of Object.keys(row)) { + // Object.keys(JSON)でキーを1個ずつ取り出す(Rubyのkeys) + let id = "__" + key + "__"; // HTML要素のID + let elem = document.getElementById(id); + if (elem) { // もし id="__カラム名__" の要素が見つかったら + elem.innerText = row[key]; // その要素の内部テキストを更新 + } + } + } + function slide(n) { // nで指定した数だけ現在位置(pos)をずらす + pos = (nQuiz+pos+n) % nQuiz; // 0以上 nQUIZ以下 になるよう調整 + putValues(quiz[pos]); // ずらした添字位置で文書書き換え + } + function left() {slide(-1);} // 1つ前に戻るボタンの処理 + function right() {slide(1);} // 1つ先に進むボタンの処理 + function init() { // HTML文書を読み終わったら呼ばれる + fetch(csvfile). // csvfileをサーバから読み込んで + then((resp) => { // 応答がrespに入るので + if (resp.ok) return resp.text(); // テキストを返す + }).then((txt) => { // テキストが txt に入るので + quiz = new CSV(txt, {header: true}).parse(); // CSV解析 + nQuiz = quiz.length; // 行数を記憶 + putValues(quiz[pos]); // 最初の行のデータを表示 + });; + document.getElementById("left").addEventListener("click", left); + document.getElementById("right").addEventListener("click", right); } document.addEventListener("DOMContentLoaded", ()=>{ - init(); + init(); // ブラウザの文書読み込みが完了したらここに来る }, false); })();