サンプル

まずはこちらをダウンロードしてください。ダウンロード後、ファイルを解凍してください。
解凍したフォルダには「sample.html」「form.html」の2つのファイルが存在しています。まずは「sample.html」をブラウザで開いてみましょう。

サンプル

上記の画像のような画面が開かれると思います。こちらを触ってみて下さい。



続いて「form.html」をブラウザで開いてみましょう。

質問形式

主に使われると思う質問形式が入っている画面が開かれます。

編集

「form.html」をベースにアンケートを作ります。
「form.html」を右クリックし、「このアプリケーションから開く」からお使いのエディタ(Atom,Xcode,秀丸など)で開きます。

Atomで開いた「form.html」

プログラムに触れたことがない方には何が何だか分からないと思われますが、色枠で囲った部分がそれぞれ連動しています。

ブラウザ側

エディタ側

エディタ側で白文字で入力されている部分がブラウザ側で表示されている文字です。その部分だけをご希望に合わせて書き換えを行って下さい。

続いて設問ごとの説明をしていきます。

インプット型

設問は<article class=”form-group”>から</article>で挟まれた部分に入力します。設問をコピーして増やす場合は<article class=”form-group”>から</article>を含めてコピーして下さい。

また、書き換える部分は色枠で囲んだ部分です。
赤枠で囲まれた部分は先程と同じでブラウザ上で表示される文字です。
緑枠で囲まれた「data-required=”true”」を入力すると解答必須になります。
青枠はlearningBOXで解答結果を見た時に表示される下の画像の青枠部分です。

learningBOXでの解答結果

青枠部分に同じ名前を設定してしまうと解答が混ざってしまうので気をつけて下さい。

オレンジ色の枠はプルダウンや複数選択、ラジオボタン形式の場合の下の画像の部分が表示されます。

” “で挟まれている部分を書き換える

枠の右側に表示されているのはブラウザ上で表示される部分です。画面上では別の選択肢として表示されていても、それを選択した場合に保存される答えは枠内の文字です。

あとは、必要な設問をコピーして書き換えて保存します。

慣れてきたら「sample.html」がどのようにして作られているのかをエディタ側とブラウザ側を見比べて見ましょう。一つの設問に複数の解答形式を用意したり出来るようになります。もちろん、書き換えてそのまま使っていただいても構いません。

learningBOXに登録する

1.「問題を管理・作成する」の+マークをクリックし、「教材を追加する」「アンケートフォームをインポートする」をクリックします。

登録したいフォルダに移動してからの方が後々の管理が楽になります。

2.名前を入力し、「ファイルを選択」から登録したい.htmlファイルを選択し保存をクリックします。
以上で完了です。