基本編②では、問題を出す画面を作りました。
今回は、その問題に答えられるようにして、正解・不正解の画面を表示するようにします。
基本編①で作成した設計書の↓の部分を作っていきます。
基本編②はこちら：基本編② 問題を出そう
〇×クイズを作ろう トップ記事はこちら：〇×クイズを作ろうトップ記事
解説の画像が見づらい時は、画像をクリックして拡大して見てね！
正解・不正解の画面を作ろう
最初に、下のような正解・不正解の画面を作っていきましょう。
正解画面と不正解画面の２つありますが、この２つの画面はほとんど同じですよね？
違いは「正解」「残念」の文字だけです。
なので、正解画面と不正解画面は１つの画面として作成します。
「正解」「残念」の文字 はスプライトを作って表示させるようにします。
また、「クリックして次へ」というボタンにはプログラムを実装する必要があるので、これもスプライトにします。
さらに、表示する解説文は問題によって変わるので、問題文のスプライトと同じように、解説文のスプライトを作成します。
背景を作る
整理すると、今回背景として作るのは↓の部分のみで、他のものはスプライトにします。
それでは、背景を作ってみましょう。
新しい背景を描いていきます。
作り方は前回の基本編②で作った問題画面の作り方を思い出しながら作ってみましょう。
↓のような感じにできたらOKです。
今作った背景のコスチュームの名前を分かりやすいように「解説画面」という名前にしておきましょう。
スプライトを作る
解説画面に表示するスプライトを作っていきましょう。今回作るスプライトは以下の４つです。
- 「正解・残念」のスプライト（コスチュームで正解と残念を分ける）
- 「次へ」のスプライト
- 「解説文」のスプライト
正解・残念のスプライトを作ろう
新しいスプライトを用意して、「正解・残念」のスプライトを作っていきましょう。
新しいスプライトが用意できたら、「文字」ツールをクリックして、「正解」という文字を書きましょう。文字を書いたら、大きさや色、フォントを調整しましょう。
もし、別のスプライトがジャマな場合は、↓のようにすると隠すことができます。
「正解」の文字が書けたら、コスチュームに分かりやすい名前を付けましょう。
「正解」ができたら次は「残念」を作っていきます。
新しいコスチュームを用意しましょう。
コスチュームが用意できたら「正解」と同じように「残念」の文字を書きましょう。
できたら、最後にスプライトの名前を分かりやすい名前に変えましょう。
これで、「正解・残念」のスプライトは完成です。
「次へ」のスプライトを作ろう
新しいスプライトを用意して、「次へ」のスプライトを作っていきましょう。
手順は先ほどの「正解・残念」のスプライトと同じですので、作ってみましょう。
最後に、スプライトの名前を分かりやすい名前にしましょう。
これで「次へ」のスプライトは完成です。
「解説文」のスプライトを作ろう
新しいスプライトを用意して「解説文」のスプライトを作っていきましょう。
基本編②で「問題文」のスプライトを作ったときと同じように、背景の白い箱にきれいに収まるように調整しながら解説文を入力しましょう。
↑のような感じで「解説文」のスプライトを作りましょう。
できたら、最後にスプライトの名前を分かりやすい名前にしましょう。
これで「解説文」のスプライトは完成です。
今回使う背景とすべてのスプライトが完成しました。
プログラミングしよう
スプライトにプログラムを実装していきましょう。
今回プログラミングする内容は次の通りです。
問題に答えられるようにするために、基本編②で作った『問題文』と『マル』、『バツ』のスプライトにもプログラミングしていきます。
| スプライト | プログラムの内容 |
|---|---|
| 問題文 | ・『解説画面』になったらスプライトを隠す |
| マル | ・スプライトが押されたら正解・不正解を判定して『解説画面』を表示する ・『解説画面』になったらスプライトを隠す |
| バツ | ・スプライトが押されたら正解・不正解を判定して『解説画面』を表示する ・『解説画面』になったらスプライトを隠す |
| 正解・残念 | ・『解説画面』になったらスプライトを表示する ・正解・不正解によってコスチュームを切り替える ・『問題画面』になったらスプライトを隠す |
| 解説文 | ・『解説画面』になったらスプライトを表示する ・『問題画面』になったらスプライトを隠す |
| 次へ | ・『解説画面』になったらスプライトを表示する ・スプライトが押されたら『問題画面』を表示する ・『問題画面』になったらスプライトを隠す |
いっぱいあって大変そう…。
１つひとつのプログラムはちょっとずつなので安心してください！
また、同じような処理がたくさんあるので、思ったよりもすぐにできちゃいます！
それではプログラミングしていきましょう！
『問題文』のスプライト
基本編②で作った『問題文』のスプライトには、次の処理をプログラミングしていきます。
- 『解説画面』になったらスプライトを隠す
①『問題文』のスプライトをクリックします。
②イベントの中の『背景が○○画面▼になったとき』ブロックをドラッグします。
③『背景が○○画面▼になったとき』ブロックの『○○画面▼』をクリックして『解説画面』に変えましょう。
見た目の中の『隠す』ブロックをドラッグして、『背景が解説画面▼になったとき』ブロックの下にくっつけましょう。
これで『問題文』のスプライトのプログラムは完成です。
『マル』のスプライト
基本編②で作った『マル』のスプライトには、次の２つの処理をプログラミングしていきます。
- スプライトが押されたら正解・不正解を判定して『解説画面』を表示する
- 『解説画面』になったらスプライトを隠す
まずは、簡単な「『解説画面』になったらスプライトを隠す」処理からプログラミングしていきます。
『解説画面』になったらスプライトを隠す
『マル』のスプライトは『解説画面』では表示させたくないので、『解説画面』になったときに隠すというプログラミングをしていきます。
①『マル』のスプライトをクリックします。
②イベントの中の『背景が○○画面▼になったとき』ブロックをドラッグしましょう。
③『背景が○○画面▼になったとき』ブロックの『○○画面▼』をクリックして『解説画面』に変えましょう。
見た目の中の『隠す』ブロックをドラッグして、『背景が解説画面▼になったとき』ブロックの下にくっつけましょう。
これで「『解説画面』になったらスプライトを隠すプログラム」の完成です。
スプライトが押されたら正解・不正解を判定して『解説画面』を表示する
このプログラムが今回の基本編③で作るプログラムの中で、一番難しいプログラムになります。
これさえできれば、あとは簡単なプログラムだけなので、がんばってプログラミングしよう！
イベントの中の『このスプライトが押されたとき』ブロックをドラッグしましょう。
次に正解・不正解を判定する部分を作ります。
正解・不正解を判定には変数を使います。この変数は、問題の答えを入れるために使います。
変数の中の『変数を作る』をクリックしましょう。
①変数の名前を「答え」にしましょう。
②この変数は、『バツ』のスプライトでも使用するので、「すべてのスプライト用」を選びましょう。
③最後に『OK』をクリックしましょう。
そうすると、新しい変数ができたと思います。
この変数に、問題の答えを入れます。
①イベントの中の『緑の旗が押されたとき』ブロックをドラッグします。
②変数の中の『答え▼を0にする』ブロックをドラッグして、『緑の旗が押されたとき』ブロックの下にくっつけましょう。
③『答え▼を0にする』ブロックの「0」の部分に問題の答えを入れます。問題の答えが「○」の場合は『マル』、「×」の場合は『バツ』と入れましょう。
ここまでできたら、緑の旗をクリックして実行してみてください。
ゲーム画面に表示されている変数「答え」が設定した答えに代わっていればOKです。答えが正しく設定できていることが確認出来たら、変数を表示しないようにチェックを外しておきましょう。
ここからは、正解・不正解を判定するプログラムを作っていきます。
制御の中の『もし＜＞なら～でなければ』ブロックをドラッグして、『このスプライトが押されたとき』ブロックの下にくっつけましょう。
演算の中の『○＝50』のブロックをドラッグして、「もし＜＞なら～でなければ」ブロックの「＜＞」の部分にはめこみましょう。
変数の中の『答え』をドラッグして、『○＝50』の「○」の部分にはめこみましょう。
『変数＝50』ブロックの「50」の部分を「マル」という文字に書き換えましょう。
今作ったこの部分が正解・不正解を判定する部分になります。
次に、正解だった場合、不正解だった場合にどうするかをプログラミングしていきます。
正解だったら「正解」というメッセージを送り、不正解だったら「不正解」というメッセージを送るようにプログラミングしましょう。
イベントの中の『メッセージ1▼を送る』ブロックをドラッグして、『もし変数=マルなら～でなければ』ブロックの「なら」と「でなければ」のあいだにくっつけましょう。
『メッセージ1▼を送る』ブロックの「メッセージ1▼」の部分をクリックして、新しいメッセージを作りましょう。
新しいメッセージの名前に「正解」と入力し、「OK」をクリックしましょう。
同じ手順で、「もし変数=マルなら～でなければ」ブロックの「でなければ」の下に『不正解を送る』という処理を作ってみましょう。
↓こんな感じになればOKです。
これで「正解・不正解を判定するプログラム」は完成です。
今作ったプログラムを簡単に解説すると、『マル』のスプライトが押されたときに、答え(変数)が「マル」の場合は正解なので、「正解」のメッセージを送ります。答えが「×」の場合は不正解なので、「不正解」のメッセージを送ります。ここで送ったメッセージはこのあとでプログラミングする別のスプライトで受け取ります。
最後に『解説画面』を表示するようにします。
①見た目の中の『背景を○○画面▼にする』ブロックをドラッグして、『もし＜＞なら～でなければ』ブロックの下にくっつけましょう。
②「○○画面▼」の部分を「解説画面▼」に変えましょう。
これで「スプライトが押されたら正解・不正解を判定して『解説画面』を表示するプログラム」は完成です。
『バツ』のスプライト
基本編②で作った『バツ』のスプライトには、次の２つの処理をプログラミングしていきます。
- スプライトが押されたら正解・不正解を判定して『解説画面』を表示する
- 『解説画面』になったらスプライトを隠す
『バツ』のスプライトに実装するプログラムの内容は、『マル』のスプライトに実装した内容とほとんど同じですので、『マル』のスプライトのプログラムを思い出しながらプログラミングしてみましょう。
ただし、「答え」の変数は『マル』のスプライトで作ったものを使用するので、変数は新しく作る必要はありません。また、変数に答えを設定する処理もすでにあるため、不要です。
ではプログラミングしてみましょう。
正解・不正解の判定で『マル』のスプライトでは「答え=マル」なら「正解を送る」としていましたが、今回は「答え＝バツ」の場合に「正解を送る」ようにしなければいけません。
これで『バツ』のスプライトのプログラムは完成です。
『正解・残念』のスプライト
このスプライトには、次の３つの処理をプログラミングしていきます。
- 『解説画面』になったらスプライトを表示する
- 正解・不正解によってコスチュームを切り替える
- 『問題画面』になったらスプライトを隠す
『解説画面』になったらスプライトを表示する
①『正解・残念』のスプライトをクリックします。
②イベントの中の『背景が○○画面▼になったとき』ブロックをドラッグします。
③「○○画面▼」の部分を「解説画面▼」に変えましょう。
見た目の中の『表示する』ブロックをドラッグして、『背景が解説画面▼になったとき』ブロックの下にくっつけましょう。
これで「『解説画面』になったらスプライトを表示するプログラム」は完成です。
正解・不正解によってコスチュームを切り替える
この処理では、『マル』と『バツ』のスプライトから送られたメッセージを受け取って処理を行います。
①イベントの中の『メッセージ▼を受け取ったとき』をドラッグします。
②「メッセージ▼」の部分を「正解」にしましょう。
③見た目の中の『コスチュームを○○▼にする』ブロックをドラッグして、『正解▼を受け取ったとき』ブロックの下にくっつけましょう。
④「○○▼」の部分を「正解」(正解のコスチューム名)にしましょう。
同じように、「不正解のメッセージを受け取ったときに不正解のコスチュームにする」というプログラムを作ってみましょう。
↓こんな感じになっていればOKです。
これで「正解・不正解によってコスチュームを切り替えるプログラム」は完成です。
『問題画面』になったらスプライトを隠す
これまでのスプライトを隠す処理と同じようにプログラミングすればいいので、サクッとやってしましょう。
①イベントの中の『背景が○○画面▼になったとき』ブロックをドラッグします。
②「○○画面▼」を「問題画面▼」にします。
③見た目の中の『隠す』をドラッグして、『背景が問題画面▼になったとき』の下にくっつけます。
これで『正解・残念』のスプライトのプログラムは完成です。
『解説文』のスプライト
このスプライトには、次の２つの処理をプログラミングしていきます。
- 『解説画面』になったらスプライトを表示する
- 『問題画面』になったらスプライトを隠す
これまでの「背景画面が○○になったら表示する・隠す」という処理と同じようにプログラミングします。
今まで何度もやっているのでサクッといきましょう。
これで『解説文』のスプライトのプログラムは完成です。
『次へ』のスプライト
このスプライトには、次の３つの処理をプログラミングしていきます。
- 『解説画面』になったらスプライトを表示する
- スプライトが押されたら『問題画面』を表示する
- 『問題画面』になったらスプライトを隠す
これもこれまでに何度もやっている処理なので、サクッとやっていきましょう。
これで、今回のプログラミングがすべて完了です。
実行して動きを確認しよう
プログラムが完成したので、実行してみて正しく動くか確認してみましょう。
以下のポイントに注目して確認してみましょう。
プログラムが正しく動くか確認するときは、以下のように確認するポイントを書き出してからチェックすると、「この部分確認するの忘れてた」「どこまで確認したか分からなくなった」となることを防ぐことができます。
小さい処理を確認する場合は、そんなことしなくてもできるかもしれませんが、処理が大きくなればなるほど、確認しなければいけないポイントが増えていきます。
頭の中で整理できなくなった場合は、今回のように確認するポイントを書き出して整理してみてください。
ちなみに、実際の仕事でプログラムが正しいか確認するときには、必ず「テスト仕様書」と呼ばれる資料を作って、確認する項目をすべて書き出してからチェックします。大きいプログラムだと、確認する項目が数百個、数千個になることもあります。
緑の旗をクリックしたとき
- 背景が『問題画面』になっていること
- 『問題文』のスプライトが表示されていること
- 『マル』のスプライトが表示されていること
- 『バツ』のスプライトが表示されていること
- 『正解・残念』のスプライトが隠れていること
- 『次へ』のスプライトが隠れていること
- 『解説文』のスプライトが隠れていること
『マル』のスプライトをクリックしたとき
- 背景が『解説画面』になること
- 『問題文』のスプライトが隠れること
- 『マル』のスプライトが隠れること
- 『バツ』のスプライトが隠れること
- 『正解・残念』のスプライトが表示されていること
- 『正解・残念』のスプライトのコスチュームが正しいこと
- 『次へ』のスプライトが表示されること
- 『解説文』のスプライトが表示されること
『バツ』のスプライトをクリックしたとき
- 背景が『解説画面』になること
- 『問題文』のスプライトが隠れること
- 『マル』のスプライトが隠れること
- 『バツ』のスプライトが隠れること
- 『正解・残念』のスプライトが表示されていること
- 『正解・残念』のスプライトのコスチュームが正しいこと
- 『次へ』のスプライトが表示されること
- 『解説文』のスプライトが表示されること
『次へ』のスプライトをクリックしたとき
- 背景が『問題画面』になること
- 『問題文』のスプライトが表示されること
- 『マル』のスプライトが表示されること
- 『バツ』のスプライトが表示されること
- 『正解・残念』のスプライトが隠れること
- 『次へ』のスプライトが隠れること
- 『解説文』のスプライトが隠れること
これらのポイントがきちんと動いていればOKです！
うまく動かない場合は、何が間違っているのか探して該当の作り方をもう一度見てみよう。
まとめ
お疲れ様でした！
今回は長くなってしまいましたが、これで「問題を出して答える」という流れが完成しました。
今はまだ１問だけしか出題できませんが、○×クイズの土台ができあがりました。
次回は、ここにBGMや効果音をつけていきます。
次の記事「基本編④」はこちら↓
基本編④ 音をつけよう
〇×クイズを作ろうトップ記事はこちら↓
〇×クイズを作ろうトップ記事
おすすめ
Scratchでのプログラミング学習におすすめの書籍です。
コメント