アンケートをhtmlファイルから作成する方法をご紹介します。

htmlファイルからアンケートを作成・アップロードする

こちらのページではアンケートをhtmlファイルから作成する方法をご紹介します。

htmlファイルからアンケートを作成する方法

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

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

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

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

htmlファイルを編集する

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

 

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

 

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

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

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

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

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

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

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

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

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

また、cssファイルや、画像を利用したい場合、zipファイルにまとめることで利用することが可能です。その場合、htmlファイルの名前を「form.html」に変更する必要があります。

learningBOXに登録する

「問題を管理・作成する」の＋マークをクリックし、「アンケート」→「アンケートをアップロード」をクリックします。

 

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