目標: クイズアプリを作る！
クイズアプリを作るには何が必要？
↓
↓
↓
今回は画像クイズを作成する！
下のリンクをクリック
HTMLとは？
HTMLとは、Webサイトを作るためのプログラミング言語!
タグと呼ばれる大なり小なりがセットになったものを使って、Webページを作ることができる！
<と>の間に細かな設定を書き込むこともできるよ！
見出しをつけよう！
見出しのタグ、<h2></h2>を使って、クイズアプリの見出しをつけよう
12行目
<h2>
この人は誰？？？
</h2>
コードを変更したら必ずCtrlキーとSキーを同時に押して保存しよう！
保存すれば右の画面が変わるはず！
画像を載せよう！
画像クイズに使う画像を探して、URLをコピーしよう！
https://i.ytimg.com/vi/pnzWQbWeBS8/maxresdefault.jpg
画像を張るためのタグ、<img>を使って画像を表示しよう！
今回は<imgと/>の間に
- 画像のURL
- 画像の説明（今回はクイズなので無し）
- 画像の大きさ（横、縦の量）
を設定しているよ！
13行目
<img
src="https://i.ytimg.com/vi/pnzWQbWeBS8/maxresdefault.jpg"
alt=""
width="300px"
height="200px"
/>
ボタンを作ろう！
画像クイズの選択肢になるボタンを作ろう！
今回は選択肢が3つあるクイズなのでボタンも三つ作ろう。
ボタンを作るためのタグ、<button></button>を使おう
<button>amazarashi</button>
<button>radwimps</button>
<button>米津玄氏</button>
さらに、ボタンタグの中（<buttonと>の間）に以下の設定をつけたそう。
<button id="choice-1">
<button id="choice-2">
<button id="choice-3">
これは、プログラムにどのボタンか伝えるidを付与しているよ！
結果を表示する部分を作ろう！
ボタンを押したときに、あたりかはずれを表示する部分を作ろう！
27行目
<div id="feedback">
この部分はボタンを押すまで表示されないから、今は右の画面が変わらなくても大丈夫！
ちなみに<div>というタグには単体で使う分には特にこれといった意味はないよ！
見本
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>クイズアプリ</title>
</head>
<body>
<div>
<!-- ↓クイズのタイトルをh2の中に書こう↓ -->
<h2>この人は誰？？？</h2>
<!-- ↓<img>タグを使って画像を表示しよう↓ -->
<img
src="https://i.ytimg.com/vi/pnzWQbWeBS8/maxresdefault.jpg"
alt=""
width="300px"
height="200px"
/>
<div>
<!-- それぞれid="choice-1",id="choice-2",id="choice-3"を持つ<button></button>タグを記述 -->
<button id="choice-1">amazarashi</button>
<button id="choice-2">radwimps</button>
<button id=d="choice-3">米津玄氏</button>
</div>
<!-- ↓id="feedback"を持つ<div></div>を記述↓ -->
<div id="feedback">
</div>
<script></script>
</body>
</html>
クイズアプリの仕組みを作ろう！
今までは、画像やボタンなどの、見た目の部分のコードを書いてきたよ。
次からは、クイズアプリの中身の部分をかいていこう。
中身の部分は
<script></script>
の間に書いていこう。
<script>というタグの意味は、ここにウェブアプリの仕組みの部分を書いていくよ、という意味！
ここでは、JavaScriptというウェブページに動きをつけられるプログラミング言語を使うよ。
何のボタンが押されたか取得する部分を作ろう！
<script>
const choice1 = document.getElementById("choice-1")
const choice2 = document.getElementById("choice-2")
const choice3 = document.getElementById("choice-3")
const feadback = document.getElementById("feedback")
</script>
ここでは、変数と呼ばれる殻の箱に、ボタンを入れているといったイメージ。
もう少し詳しく説明すると、constを使って変数を宣言し、さっきボタンに設定した各idを元にボタンノードを取得、格納しているよ。
答えを表示する部分を作ろう！
上で取得したボタンの情報をもとに、あたりかはずれを表示する部分を書いていこう。
choice1.onclick = function () {
feedback.textContent = "あたり！！！";
};
choice2.onclick = function () {
feedback.textContent = "はずれ！！！！";
};
choice3.onclick = function () {
feedback.textContent = "はずれ！！！！";
};
これは、それぞれのボタンにクリックした時にあたり、ハズレを表示する仕組みを、関数と呼ばれるものを使ってを設定しているよ
もう少し詳しく説明すると、さっき取得したボタンノードに、onclickプロパティを使用してfeedbackノードにあたりもしくはハズレのテキストを書き込む関数を設定しているよ
見本
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>クイズアプリ</title>
</head>
<body>
<div>
<!-- ↓クイズのタイトルをh2の中に書こう↓ -->
<h2>この人は誰？？？</h2>
<!-- ↓<img>タグを使って画像を表示しよう↓ -->
<img
src="https://i.ytimg.com/vi/pnzWQbWeBS8/maxresdefault.jpg"
alt=""
width="300px"
height="200px"
/>
<div>
<!-- それぞれid="choice-1",id="choice-2",id="choice-3"を持つ<button></button>タグを記述 -->
<button id="choice-1">amazarashi</button>
<button id="choice-2">radwimps</button>
<button id="choice-3">米津玄氏</button>
</div>
<!-- ↓id="feedback"を持つ<div></div>を記述↓ -->
<div id="feedback"></div>
</div>
<script>
const choice1 = document.getElementById("choice-1");
const choice2 = document.getElementById("choice-2");
const choice3 = document.getElementById("choice-3");
const feedback = document.getElementById("feedback");
choice1.onclick = function () {
feedback.textContent = "あたり！！！";
};
choice2.onclick = function () {
feedback.textContent = "はずれ！！！！";
};
choice3.onclick = function () {
feedback.textContent = "はずれ！！！！";
};
</script>
</body>
</html>
お疲れ様！
これで、HTMLとJavaScriptを使ったコードが完成
ここまでくれば、三つの選択肢がある画像クイズアプリが完成しているはず
選択肢を増やしたり、画像の数を増やしたりして工夫してみよう