SpringBoot

クイズアプリをSpringBoot+PostgreSQL+MyBatis+Thymeleafで作る(3)【Controller,フロントエンド作成】

更新日:

クイズアプリの最終仕上げを行っていきます。

前回までの内容は以下です。

クイズアプリをSpringBoot+PostgreSQL+MyBatis+Thymeleafで作る(1)【環境構築】

クイズアプリをSpringBoot+PostgreSQL+MyBatis+Thymeleafで作る(2)【サーバサイド〜SpringBoot起動まで】

出題開始処理(サーバサイド)

QuestionControllerに出題開始時の処理を追加します。

index.htmlでフォームボタン(action="/question/start")を押したら処理が実行されます。

同時にindex.htmlで入力した出題数(name="questionCount")の分だけのquestionListリストに作成し、my_quizテーブルに登録します。

最後は出題用のサーバサイド処理である/question/quizにリダイレクトさせます。

出題(サーバサイド)

QuestionControllerに出題処理を追加します。

未解答の問題をquiz.htmlに渡すようにしています。

 

出題(フロントエンド)

/src/main/resources/templatesの配下にquiz.htmlを作成します。

同時に、/src/main/resources/staticの配下にcssフォルダ、jsフォルダ、imageフォルダを作成します。更にcssフォルダ配下にquiz.css、jsフォルダ配下にquiz.jsを作成します。imageフォルダにはマル採点.pngバツ採点.pngを配置します。

quiz.htmlは以下とします。

32〜39行目のform処理でクイズIDと選択した解答をサーバサイドの/question/answerに送信しています。

解答処理(サーバサイド)

quiz.htmlからクイズのIDと選択肢の番号を受け取り、そのIDに対応した正解と解説を取得します。

正誤判定では選択肢の番号とデータベースの正解の番号を照合します。

正解の時にはjudgeflg=true、不正解の時にはjudgeflg=falseとします。

解答済のフラグをセットしたらquiz.htmlに戻ります。

 

解答処理(フロントエンド)

quiz.htmlに解答処理を追加します。先の解答処理(サーバサイド)から取得したjudgeflgで処理を分岐してマル採点、バツ採点の画像を表示させます。

th:if="${judgeflg == true || judgeflg == false}" はjudgeflgを取得できたら解答と解説を表示する処理です。

結果処理(サーバサイド)

出題(サーバサイド)において出題クイズリストの空チェック

if (questionIdlist.size() == 0) { return "redirect:/question/result"; }

に該当したら結果処理を実行します。

結果処理では正解率と正解率に応じたメッセージを出力しています。

 

結果処理(フロントエンド)

/src/main/resources/templates配下にresult.htmlを作成します。

th:text="${answerrate}で正解率を表示、th:text="${resultmsg}"でメッセージを表示しています。

完成確認

以上でコーディングは完了したので、SpringBootアプリケーションを起動して、localhost:8085/questionにアクセスします。

動作の確認ができました。

 

ソースコード

GitHubにアップしてあります。

https://github.com/S-S-T-Y/QuizSpringBoot

 

以上。

-SpringBoot
-, , , ,

Copyright© ITエンジニアへの転身 , 2021 All Rights Reserved Powered by STINGER.