JavaScript講座｜性格診断テストをつくろう【ラジオボタン】

うさタブ

今回はJavaScriptで診断テストをつくるッピ！

ユウキ

診断テスト～？

うさタブ

今日は【陰キャ・陽キャ診断テスト】をつくってみるッピよ～

ユウキ

なんかビミョーなテストだなぁ～

この記事で学べること

<p>タグでの問題文のつくりかた
<input>タグでのラジオボタンのつくりかた
JavaScriptでの判定プログラムのつくりかた

完成コード見本

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<script>
<!-- ↓②ここに判定プログラムを書こう！↓ -->
function answer(){
    let Q= document.getElementById( "Q" );
    let A = Number(Q.q1.value) + Number(Q.q2.value) + Number(Q.q3.value) + Number(Q.q4.value);

    if (A >= 9) {
        text = "あなたは陽キャです。"
    }else if(A >= 4 && A <= 8){
        text = "あなたはふつうです。";
    }else{
        text = "あなたは陰キャです。";
    }
    document.getElementById("kotae").innerHTML = text;
}
</script>
<!-- ↓①この下に問題文を入力してね！↓ -->
<h1>性格診断</h1>
<form id="Q">
    <p>甘いものが好き？<br>
    <input name="q1" type="radio" value="3"> 好き
    <input name="q1" type="radio" value="2"> 普通
    <input name="q1" type="radio" value="1"> 嫌い
    </p>
    <p>アウトドア派？　インドア派？<br>
    <input name="q2" type="radio" value="3"> アウトドア派
    <input name="q2" type="radio" value="2"> どちらでもない
    <input name="q2" type="radio" value="1"> インドア派
    </p>
    <p>旅行でみっちり計画建てるほう？<br>
    <input name="q3" type="radio" value="3"> ぜんぜん
    <input name="q3" type="radio" value="2"> どちらでもない
    <input name="q3" type="radio" value="1"> みっちり
    </p>
    <p>ケンカしたらすぐあやまる？<br>
    <input name="q4" type="radio" value="3"> ぜんぜん
    <input name="q4" type="radio" value="2"> どちらでもない
    <input name="q4" type="radio" value="1"> あやまる
    </p>
</form>

<button onclick="answer();">性格診断！</button>
<div id="kotae">ボタンを押してください</div>

<!-- ここまで！ -->
</body>
</html>

うさタブ

今回はこのコードをわかりやすく！

じっくり解説していくッピよ～

性格診断テストをつくろう

必要なもの

うさタブ

メモ帳
ブラウザ

が必要ッピ！

元になるコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<script>
<!-- ②↓ここに判定プログラムを書こう！↓ -->


</script>
<!-- ①↓この下に【問題文】を入力してね！↓ -->

<!-- ここまで！ -->
</body>
</html>

問題文をつくってみよう

うさタブ

準備ができたらさっそく【問題文】を作ってみるっぴ！

うさタブ

まず<body><body>の間に

<h1>性格診断</h1>
<p>甘いものが好き？</p>
<p>アウトドア派？　インドア派？</p>
<p>旅行でみっちり計画建てるほう？</p>
<p>ケンカしたらすぐあやまる？</p>

と入力するッピ！

ユウキ

お、こんな感じかな？

うさタブ

いい感じッピ！

ここまでのコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<script>
<!-- ↓②ここに判定プログラムを書こう！↓ -->


</script>
<!-- ↓①この下に問題文を入力してね！↓ -->

<h1>性格診断</h1>
<p>甘いものが好き？</p>
<p>アウトドア派？　インドア派？</p>
<p>旅行でみっちり計画建てるほう？</p>
<p>ケンカしたらすぐあやまる？</p>

<!-- ここまで！ -->
</body>
</html>

ラジオボタン（チェックボックス）をつくってみよう

うさタブ

次はラジオボタン（チェックボタン）をつくってみるッピ！

ユウキ

ラジオボタンってさっきのコレ？

この丸ポチみたいなやつ

うさタブ

そのとおりッピ！

これを使ってチェックリストを作っていくッピ！

fromタグでチェックリストをタグ付けする

うさタブ

チェックリストをつくるためには、

ここから先はユーザーの入れた情報を受信する

【from】タグで『問題文』囲ってあげる必要があるッピ！

うさタブ

さっきの問題文を

<form id="Q">
問題文
</from>

で囲ってみるッピよ～

ここまでのコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<script>
<!-- ↓②ここに判定プログラムを書こう！↓ -->


</script>
<!-- ↓①この下に問題文を入力してね！↓ -->

<h1>性格診断</h1>

<form id="Q">
<p>甘いものが好き？</p>
<p>アウトドア派？　インドア派？</p>
<p>旅行でみっちり計画建てるほう？</p>
<p>ケンカしたらすぐあやまる？</p>
</form>

<!-- ここまで！ -->
</body>
</html>

ユウキ

この

<from id=”Q“>って？？

うさタブ

このid=”Q“は

「Qという名前のID住所ですよ」

という意味ッピね！

うさタブ

idをつけることによって、あとで

「この住所のこの部分をカスタマイズして！」という

プログラミングが組みやすくなるッピよ～

ユウキ

なるほどな～

ラジオボタンをつくる

うさタブ

次はラジオボタンを設置してみるッピ！

最初の【問題文】甘いものが好き？　に

<p>甘いものが好き？<br>
 <input name="q1" type="radio" value="3"> 好き
 <input name="q1" type="radio" value="2"> 普通
 <input name="q1" type="radio" value="1"> 嫌い
</p>

とボタンを付け加えていくッピ！

うさタブ

<from></from>のくくりでみるとこんな感じッピ！

<form id="Q">
<p>甘いものが好き？<br>
 <input name="q1" type="radio" value="3"> 好き
 <input name="q1" type="radio" value="2"> 普通
 <input name="q1" type="radio" value="1"> 嫌い
</p>
<p>アウトドア派？　インドア派？</p>
<p>旅行でみっちり計画建てるほう？</p>
<p>ケンカしたらすぐあやまる？</p>
</form>

ユウキ

うーんこんな感じかな？

うさタブ

よくできてるッピ！

ユウキくん天才ッピ!!

ユウキ

やったぜ♪

ここまでのコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<script>
<!-- ↓②ここに判定プログラムを書こう！↓ -->


</script>
<!-- ↓①この下に問題文を入力してね！↓ -->

<h1>性格診断</h1>

<form id="Q">
<p>甘いものが好き？<br>
 <input name="q1" type="radio" value="3"> 好き
 <input name="q1" type="radio" value="2"> 普通
 <input name="q1" type="radio" value="1"> 嫌い
</p>
<p>アウトドア派？　インドア派？</p>
<p>旅行でみっちり計画建てるほう？</p>
<p>ケンカしたらすぐあやまる？</p>
</form>

<!-- ここまで！ -->
</body>
</html>

ラジオボタン解説

ユウキ

なあ、このラジオボタンの

<input name=”q1″ type=”radio” value=”3″>

とかって、どういう意味なんだ？？

ユウキ

たくさんあって意味がわからないよ・・・

うさタブ

それはッピね、

<inputユーザー入力を反映します name　名前は=”q1q1“です type　入力タイプは=”radioラジオボタンです” valueうめこむ値は=”33です“>

という意味ッピ！

ユウキ

うーん

わかったようなわからないよーな・・・

ユウキ

とりあえずこの<input>は

情報を入力したり選択すると部分に取り付けるタグで、

type=”radio”は『ラジオボタン』を設定する命令文こと??

うさタブ

そのとおりッピ！

name=”q1“は<input>タグにおけるid

value=”3“はプログラミングにおける変数

になるッピ！

うさタブ

このvalueをしこむことで、

あとでプログラミングするとき、ここに設定した文字や数値を呼び出して

計算やコメントを変化させることができるッピ！

ユウキ

むーなんだか難しいな・・・

この先が思いやられるよ

うさタブ

安心するッピ！

このうさタブがユウキくんにわかりやすく解説してみせるッピ！

ユウキ

たのむぜ、うさタブ！

うさタブ

まかせるッピ！

この調子で、他の問題文にもラジオボタンを設置するッピ！

うさタブ

つづいて<body><body>に

<form id="Q">
    <p>甘いものが好き？<br>
    <input name="q1" type="radio" value="3"> 好き
    <input name="q1" type="radio" value="2"> 普通
    <input name="q1" type="radio" value="1"> 嫌い
    </p>
    <p>アウトドア派？　インドア派？<br>
    <input name="q2" type="radio" value="3"> アウトドア派
    <input name="q2" type="radio" value="2"> どちらでもない
    <input name="q2" type="radio" value="1"> インドア派
    </p>
    <p>旅行でみっちり計画建てるほう？<br>
    <input name="q3" type="radio" value="3"> ぜんぜん
    <input name="q3" type="radio" value="2"> どちらでもない
    <input name="q3" type="radio" value="1"> みっちり
    </p>
    <p>ケンカしたらすぐあやまる？<br>
    <input name="q4" type="radio" value="3"> ぜんぜん
    <input name="q4" type="radio" value="2"> どちらでもない
    <input name="q4" type="radio" value="1"> あやまる
    </p>
</form>

と入力するッピよ～

ここまでのコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<script>
<!-- ↓②ここに判定プログラムを書こう！↓ -->

</script>
<!-- ↓①この下に問題文を入力してね！↓ -->
<h1>性格診断</h1>
<form id="Q">
    <p>甘いものが好き？<br>
    <input name="q1" type="radio" value="3"> 好き
    <input name="q1" type="radio" value="2"> 普通
    <input name="q1" type="radio" value="1"> 嫌い
    </p>
    <p>アウトドア派？　インドア派？<br>
    <input name="q2" type="radio" value="3"> アウトドア派
    <input name="q2" type="radio" value="2"> どちらでもない
    <input name="q2" type="radio" value="1"> インドア派
    </p>
    <p>旅行でみっちり計画建てるほう？<br>
    <input name="q3" type="radio" value="3"> ぜんぜん
    <input name="q3" type="radio" value="2"> どちらでもない
    <input name="q3" type="radio" value="1"> みっちり
    </p>
    <p>ケンカしたらすぐあやまる？<br>
    <input name="q4" type="radio" value="3"> ぜんぜん
    <input name="q4" type="radio" value="2"> どちらでもない
    <input name="q4" type="radio" value="1"> あやまる
    </p>
</form>
<!-- ここまで！ -->
</body>
</html>

ユウキ

できた～

判定ボタンを設置する

うさタブ

次は判定ボタンを設置するッピ！

ユウキ

お、楽しみだな～

<button>タグでボタンを作成する

うさタブ

まずはボタンをつくるッピ！

ユウキ

ボタンってコレ？

うさタブ

そのとおりッピ！

さっそく問題文の下に判定ボタンを設置するッピよ～

うさタブ

<button onclick="answer();">性格診断！</button>
<div id="kotae">ボタンを押してください</div>

と入力するッピ！

ここまでのコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<script>
<!-- ↓②ここに判定プログラムを書こう！↓ -->

</script>
<!-- ↓①この下に問題文を入力してね！↓ -->
<h1>性格診断</h1>
<form id="Q">
    <p>甘いものが好き？<br>
    <input name="q1" type="radio" value="3"> 好き
    <input name="q1" type="radio" value="2"> 普通
    <input name="q1" type="radio" value="1"> 嫌い
    </p>
    <p>アウトドア派？　インドア派？<br>
    <input name="q2" type="radio" value="3"> アウトドア派
    <input name="q2" type="radio" value="2"> どちらでもない
    <input name="q2" type="radio" value="1"> インドア派
    </p>
    <p>旅行でみっちり計画建てるほう？<br>
    <input name="q3" type="radio" value="3"> ぜんぜん
    <input name="q3" type="radio" value="2"> どちらでもない
    <input name="q3" type="radio" value="1"> みっちり
    </p>
    <p>ケンカしたらすぐあやまる？<br>
    <input name="q4" type="radio" value="3"> ぜんぜん
    <input name="q4" type="radio" value="2"> どちらでもない
    <input name="q4" type="radio" value="1"> あやまる
    </p>
</form>

<button onclick="answer();">性格診断！</button>
<div id="kotae">ボタンを押してください</div>
<!-- ここまで！ -->
</body>
</html>

ユウキ

できた～！！

ユウキ

・・・だけどコレ、

ボタンを押してもうんともすんとも言わないぞ？

ユウキ

どうなってるんだ、うさタブ？

うさタブ

それはまだ【判定プログラム】を組み込んでいないからッピね

うさタブ

これから性格判定プログラムを作って、

ボタンを押したら呼び出す仕組みをつくっていくッピよ～

判定プログラムを作成する

うさタブ

ここから最後の解説に入るッピ！

一緒に性格診断プログラムをつくっていくッピね！

うさタブ

そのためにはまずボタンを押したらプログラムが動作するように、

プログラムのセットをつくる必要があるッピ！

ユウキ

知ってるぜ！

プログラムを他の場所で呼び出すためには、function関数を設定するんだよな

うさタブ

さすがユウキくんッピ！

さっそくfunction関数を設定して行くッピ！

JavaScript入門講座｜命令文のセット【関数】ついて学ぼう

JavaScript入門｜命令文のセット【関数】ついて学ぼう｜会話形式で楽しく学べる｜関数functionについて学ぼう

function関数を作成する

うさタブ

function answer(){
 //判定プログラムをここに組み込む
}

と入力するッピ！

この function anser｛　｝の中に、セットに組み込むプログラムを書いていくッピ！

うさタブ

これにくわえて、前に書いたボタンプログラム

<button onclick="answer();">性格診断！</button>

と組み合わせるとプログラムを呼び出すことができるんだッピ！

うさタブ

これは

<buttonボタンを設置します　 onclickクリックしたら　=”answer()　このプログラムを実行して;“>性格診断！</buttonボタンを終わります>

という意味になるッピよ～

if文を使って判定プログラムを書き出す

JavaScript入門講座｜プログラムの分かれ道　～if文・条件分岐について学ぼう～

JavaScript入門｜if文・条件分岐について学ぼう｜会話形式で楽しく学べる｜if文（プログラムの分かれ道）｜else文（条件外の設定）

うさタブ

ここは一気にプログラムを公開するッピ！

function answer(){ } の中に

function answer(){
    let Q= document.getElementById( "Q" );
    let A = Number(Q.q1.value) + Number(Q.q2.value) + Number(Q.q3.value) + Number(Q.q4.value);

    if (A >= 9) {
        text = "あなたは陽キャです。"
    }else if(A >= 4 && A <= 8){
        text = "あなたはふつうです。";
    }else{
        text = "あなたは陰キャです。";
    }
    document.getElementById("kotae").innerHTML = text;
}

と入力するッピ！

うさタブ

このコードについて詳しく解説していくッピよ～

valueを使って入力した値を呼び出す

うさタブ

この診断テストは、

選択肢にあてられた数値の合計によって性格の診断ができる

というものッピ！

ユウキ

っていわれても、わかんないなー

ユウキ

あ、もしかして

<input name="q1" type="radio" value="3"> 好き
<input name="q1" type="radio" value="2"> 普通
<input name="q1" type="radio" value="1"> 嫌い

のこと？

ユウキ

この

< input name=”q1″ type=”radio” value=”3” >

valueの後ろにある数字の合計が性格診断テストに使われてるかんじ？？

うさタブ

そのとおりッピ！　ユウキくん天才ッピ！

この

< input name=”q1” type=”radio” value=”3″ >

name で、選択肢をグループ分けをして、

< input name=”q1″ type=”radio” value=”3” >

で、選択したvalueの値を集計して診断してるんだッピ！

ユウキ

なるほどね～

うさタブ

だからこのプログラムを

< input name=”q1″ type=”radio” value=”3” >

で、JavaScriptで吸い出して計算する必要があるがあるんだッピ！

うさタブ

この

let Q= document.getElementById( "Q" );
let A = Number(Q.q1.value) + Number(Q.q2.value)....;

はラジオボタンの選択データを取得（吸い取る）プログラムになるッピ！

うさタブ

これは

let Q変数Qを作成= document.id=”Q” のデータをgetElementById　変数Qに組み込みます( “Q” );

let A変数Aを作成 = Number文字データを数値変換　(QID（住所）Qの中の.q1　name=”p1″　.valueデータを取得します) + Number文字データを数値変換　(Q.q2.name=”p2”の valueデータを取得します)….;

という意味ッピね～

ユウキ

へ～

Number()で文字データを数値に変換する

ユウキ

なあうさタブ

この

Number文字の数変換(Q.q1.value)

って何？

ユウキ

なんで文字列を数値に変換する必要があるんだ？

うさタブ

それはッピね～

< input name=”q1″ type=”radio” value=”3” >

のvalueデータは、そのままだと【文字データ】だからッピ

うさタブ

つまり、このまま文字データだと【数値】として認識されないから

計算ができないんだッピよ～

ユウキ

そうなのか～

うさタブ

もし文字データのままだと

1+1=2

ではなくて

1+1=>11

になってしまうッピ！

ユウキ

へー

うさタブ

話をもどすッピ！

このNumber()を使うことで

let A = Number(Q.q1.value) + Number(Q.q2.value) + Number(Q.q3.value) + Number(Q.q4.value);

で選択したラジオボタンの数値を集計して最後に診断結果を表示することができるんだッピよ！

ユウキ

んーと、つまり

let A = Number(Q.q1.value質問１の数値) +　プラス　 Number(Q.q2.value質問２の数値) +　プラス　 Number(Q.q3.value質問３の数値) +　プラス　 Number(Q.q4.value質問４の数値);

・・・この変数Aが集計した結果の数字になるってことか！

うさタブ

ジャストライ！　そのとおりッピ！

次はこの集計結果をもとに、診断結果をかえていく仕組みをつくっていくッピよ～

if文・＞大なり・小なり＜を使って範囲をしぼりこんでいく

うさタブ

次はif文で診断結果をしぼりこんでいくッピよ～

うさタブ

if (A >= 9) {
        text = "あなたは陽キャです。";
    }else if(A >= 4 && A <= 8){
        text = "あなたはふつうです。";
    }else{
        text = "あなたは陰キャです。";
    }

このプログラムで最後に診断結果を表示する変数textを変更するんだッピ！

うさタブ

ifもしも (A >= 9変数Aが9以上なら)
{ text変数textは = “あなたは陽キャです”; }

else ifもしもそれ以外で ( A >= 4Aが４以上で &&　さらに　 A <= 8 Aが８以上なら)
{ text = “あなたはふつうです。”; }

elseそれ以外は【すべて】
{ text = “あなたは陰キャです。”; }

という意味ッピ！

ユウキ

つまり変数Aの数値が

9以上は「陽キャ」
８以下４以上なら「ふつう」
それ以下の数値は「陰キャ」

になるってこと？？

うさタブ

そのとおりッピ！

if (条件A &&さらに 条件B)

とすることで、複数の条件を当てはめて

結果をしぼりこむことができるんだッピよ～

getElementById(“住所ID”) でテキストを書き換える

うさタブ

最後はテキストの書き換えプログラムッピね！

document.getElementById("kotae").innerHTML = text;

で、いちばんうしろの文章を診断結果にかきかえることができるッピ！

うさタブ

これは

documentホームページ内の.getElement指定した部分ById(“kotae“).　ID（住所）kotaeをinnerHTML　書き換えて = text変数textのなかみに;

という意味ッピよ～

ユウキ

できた～

全体のコードの確認

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<script>
<!-- ↓②ここに判定プログラムを書こう！↓ -->
function answer(){
    let Q= document.getElementById( "Q" );
    let A = Number(Q.q1.value) + Number(Q.q2.value) + Number(Q.q3.value) + Number(Q.q4.value);

    if (A >= 9) {
        text = "あなたは陽キャです。"
    }else if(A >= 4 && A <= 8){
        text = "あなたはふつうです。";
    }else{
        text = "あなたは陰キャです。";
    }
    document.getElementById("kotae").innerHTML = text;
}
</script>
<!-- ↓①この下に問題文を入力してね！↓ -->
<h1>性格診断</h1>
<form id="Q">
    <p>甘いものが好き？<br>
    <input name="q1" type="radio" value="3"> 好き
    <input name="q1" type="radio" value="2"> 普通
    <input name="q1" type="radio" value="1"> 嫌い
    </p>
    <p>アウトドア派？　インドア派？<br>
    <input name="q2" type="radio" value="3"> アウトドア派
    <input name="q2" type="radio" value="2"> どちらでもない
    <input name="q2" type="radio" value="1"> インドア派
    </p>
    <p>旅行でみっちり計画建てるほう？<br>
    <input name="q3" type="radio" value="3"> ぜんぜん
    <input name="q3" type="radio" value="2"> どちらでもない
    <input name="q3" type="radio" value="1"> みっちり
    </p>
    <p>ケンカしたらすぐあやまる？<br>
    <input name="q4" type="radio" value="3"> ぜんぜん
    <input name="q4" type="radio" value="2"> どちらでもない
    <input name="q4" type="radio" value="1"> あやまる
    </p>
</form>

<button onclick="answer();">性格診断！</button>
<div id="kotae">ボタンを押してください</div>

<!-- ここまで！ -->
</body>
</html>

学習のまとめ