計算問題を一括生成
おはようございます。QuizGenerator作り出しッペの西村です。
今回は、QuizGeneratorで計算問題を一気に作る方法を紹介します。
QuizGeneratorの問題ファイルを作ろう
SCORMの教材の作り方の記事を書こうかとおもったのですが、SCORM形式の教材を1から作るのはそれなりに大変です。そこで、今回は、QuizGeneratorの問題ファイルを自動生成してみようと思います。(1からつくっちゃったらこのサイトに乗せる記事としてはふさわしくないですし)
JavaScriptで作る
問題ファイルを一気に作るには、Excelを使う方法、PHPやPythonなどを使う方法もありますが、ブラウザ上で簡単にできたほうがよいので、今回はJavaScriptで作ってみます。
計算問題とは
計算問題とは、数式の計算結果を答えさせるものですが、あまり複雑なことはやりたくないので、今回は、2つの数字を＋－✕のいずれかの記号でつなげたものを問題とします。また2つの数値の範囲を指定することで難易度を調整します。
関数を作る
計算問題を生成する関数を作ります。
1問分のデータを作る関数をmakeQuiz(min,max,op)とし、n問分作る関数をmakeQuizN(min,max,op,n)とします。
makeQuizNの引数は、それぞれ以下の通りです。
コードは以下の通りです。
| function makeQuiz(min, max, op){ | |
| var v1 = makeRandom(min, max); | |
| var v2 = makeRandom(min, max); | |
| var str = ""; | |
| str += v1 + " " + op + " " + v2 + " =\n"; | |
| str += "sa:\n"; | |
| //正答を作る | |
| var answerArray = []; | |
| var answer = calc(v1, v2, op); | |
| answerArray.push(answer); | |
| str += answer + "\n"; | |
| //誤答を作る | |
| var dummyCount = 0; | |
| var endlessLoopDetector = 0; | |
| while(dummyCount < 3){ | |
| var v3 = makeRandom(min, max); | |
| var v4 = makeRandom(min, max); | |
| var dummyAnswer = calc(v3, v4, op); | |
| if(answerArray.indexOf(dummyAnswer) == -1){ | |
| str += dummyAnswer + "\n"; | |
| answerArray.push(dummyAnswer); | |
| dummyCount++ | |
| }else{ | |
| if(endlessLoopDetector++ > 10**3)break; | |
| } | |
| } | |
| return str; | |
| } | |
| function calc(a, b, op){ | |
| switch(op){ | |
| case "+": return a+b; | |
| case "*": return a*b; | |
| } | |
| } | |
| function makeRandom(m1, m2){ | |
| max = Math.max(m1, m2); | |
| min = Math.min(m1, m2); | |
| return Math.floor(min + (max - min + 1) * Math.random()); | |
| } | |
| function makeQuizN(min, max, op, n){ | |
| var qArray = []; | |
| for(var i = 0; i < n; i++){ | |
| qArray.push(makeQuiz(min, max, op)); | |
| } | |
| return qArray.join("\n"); | |
| } |
by UIをつける
最近、VueやらReactやら流行ってますが、あえてjQueryでやってみましょう。
| function makeQuizExec(){ | |
| var min = parseInt(jQuery("#math_gen_min").val()); | |
| var max = parseInt(jQuery("#math_gen_max").val()); | |
| var op = jQuery("[name=op]:checked").val(); | |
| var count = parseInt(jQuery("#math_gen_count").val()); | |
| jQuery("#math_gen_result").val(makeQuizN(min, max, op, count)); | |
| } | |
| function handleDownload(){ | |
| var data = jQuery("#math_gen_result").val(); | |
| var blob = new Blob([data], {type: "text/plain"}); | |
| var a = document.createElement("a"); | |
| a.href = URL.createObjectURL(blob); | |
| a.target = '_blank'; | |
| a.download = 'quiz.txt'; | |
| a.click(); | |
| } |
できた！
設問数:
最小:
最大:
演算子:
公開してみよう！
作った教材ファイルは、QuizGeneratorの変換画面にアップロード・公開できます。
learningBOXに登録してみよう！
learningBOXにQuizGeneratorの教材として登録できます。learningBOXに登録すれば、指定した学習者だけに割り当てることや、学習記録を残すこともできます。
次の記事では
今回は足し算と掛け算に特化したものを作りましたが、引き算と割り算もあったほうが都合がよいので、四則演算全て含むものにします。また、計算問題なので、択一だけではなく、記述式の問題も選択出来るようにする予定です。その次ぐらいで、もうちょっとSCORMに近い記事を書く予定です。
まとめ
今回は、javaScriptでQuizGeneratorの問題ファイルを作りました。QuizGeneratorはテキストファイルで問題を作成できるので、JavaScriptに限らすExcelやなにかしらのプログラミング言語を使うことで、既存コンテンツをSCORM教材化したり、一定のルールに基づいて問題を大量生成できます。なにかを作るにあたって、1から全部自分で作るのではなく、既存の仕組みとつながるものにすることで、最小限の労力で最大の成果を出せます。再利用していきたいですね！
今回作成したソースコードについては、完全版をGitHubに公開しておりますので、自由にご利用ください。
