アンケートを作成する

htmlファイル
アンケート作成フォーム

サンプル

まずはこちらをダウンロードしてください。ダウンロード後、ファイルを解凍してください。
解凍したフォルダには「sample.html」「form.html」の２つのファイルが存在しています。まずは「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」がどのようにして作られているのかをエディタ側とブラウザ側を見比べて見ましょう。一つの設問に複数の解答形式を用意したり出来るようになります。もちろん、書き換えてそのまま使っていただいても構いません。

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

learningBOXに登録する

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

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

１．learningBOXにログインし、サイドバーの「コンテンツ管理」、またはマイページの赤枠「コンテンツ管理」をクリックします。

アンケート機能-learningBOX

２．コンテンツ管理のメニューボタン(＋ボタン)→アンケート→「アンケートを作成」をクリックします。

learningBOX-アンケート作成

３．アンケート作成フォームがこのように表示されます。

アンケート機能-learningBOX2

４．アンケート作成フォームに下記のように記述します。

earningBOX-アンケートフォーム

緑色の枠・・・・・・アンケートのタイトルを記述します。
赤色の枠・・・・・・説明分を記述します。
オレンジ色の枠・・・セクション名を記述します。
青色の枠・・・・・・質問内容を記述します。
茶色の枠・・・・・・入力形式を5種類の中から選びます。
ピンク色の枠・・・・解答の選択肢を記述します。(改行区切りで1行1項目で記述してください。)
黒枠・・・・・・・・ボタンラベルを変更することが可能です。標準は「提出」ボタンです。
右下の青ボタンで＋質問を追加できます。赤ボタンで＋セクションの追加が可能です。

５．アンケートの記入が完了したら赤枠「非公開で保存」、もしくは「保存して公開」をクリックで完成です。

learningBOX-アンケートフォーム-2