コラム｜トライベック

プロダクション

2020年11月9日

Nuxt.jsで選択式クイズアプリを作ってみた(2)

本コラムについて本記事は前回のコラムの続きとなっております。前回ご紹介したアプリの実際のソースと、工夫した点を記載しております。 (共通ファイルやcssについての説明は省いております。本記事の最後に全体ソースを公開しておりますので、そちらからご参照下さい。) 前回のコラム:Nuxt.jsで選択式クイズアプリを作ってみた工夫した点問題文と選択肢は問題解答画面と解答結果画面の両方で呼び出しているため、コンポーネント化を行った。解答をやり直したい場合もあるのを考慮し、前の問題に【戻る】ボタンを設置した。解答結果画面では、自分が選択した解答と正しい答えが分かるようにした。繰り返し問題が解けるように、問題と選択肢のランダム機能を作成した。。作成したファイル ①メインページ(/pages/index.vue) ②トップ画面コンポーネント(/components/top.vue) ③問題解答画面コンポーネント(/components/questions.vue) ④解答結果画面コンポーネント(/components/result.vue) ⑤問題コンポーネント(/components/questions/qInfo.vue) ⑥コンポーネント共通Storeファイル(/store/common.js) ソースの中身メインページ(①/pages/index.vue) 本アプリのページはこの1ページのみ。画面中央に表示しているコンポーネント要素を切り替えることで、複数の画面を表示させている。 <template> <div class="main"> <div class="top"> <top v-if="dispType === 'top'"></top> <questions v-if="dispType === 'questions'"></questions> <result v-if="dispType === 'result'"></result> </div> </div> </template> <script> import { mapState, mapGetters, mapMutations, mapActions } from "vuex"; import Top from '~/components/top.vue'; import Questions from '~/components/questions.vue'; import Result from '~/components/result.vue'; import settingsJsonPath from '~/assets/json/settings.json'; // 設定ファイル export default { data() { return { } }, computed: { ...mapState('common', [ 'dispType', 'settingOption', ]), }, created () { this.readSettings(); // 初期表示設定 }, components: { Top, Questions, Result }, methods: { ...mapMutations('common', [ 'setSettingOption', 'setDispType', ]), /** * 初期表示設定 * * 設定ファイルをstoreに格納し、トップコンポーネントを表示 */ readSettings() { this.setSettingOption(settingsJsonPath); // 設定オプション情報をstoreに格納 this.setDispType('top'); // トップコンポーネントを表示 }, } } </script> ②トップ画面コンポーネント(/components/top.vue) 問題を選択する画面汎用性を持たせるために、タイトルとボタンの表記は設定ファイルの内容から取得している。 <template> <div class="topComponent"> <h2 class="title">{{title}}</h2> <div class="contents"> <div class="select_question"> <p>問題を選択</p> <ul> <li v-for="(fileInfo, index) in settingOption.questionPaths" :key="index" @click="selectQuestion(fileInfo.filePath)" :class="{'selected': selectQuestionPath === fileInfo.filePath}"> {{fileInfo.title}} </li> </ul> </div> <div class="btns-area"> <button class="btn" @click="showQuestionCoponent()" :disabled="!selectQuestionPath">{{btnName}}</button> </div> </div> </div> </template> <script> import { mapState, mapMutations } from "vuex"; import axios from 'axios'; export default { data() { return { title: '', // メインタイトル btnName: '', // ボタン名 selectQuestionPath: '', // 選択した問題集のファイルパス } }, created() { this.selectQuestionPath = ''; // 選択ファイルパスのリセット this.setSettingName(); // タイトルとボタン名を設定 }, computed: { ...mapState('common', [ 'questionList', 'settingOption', ]), }, methods: { ...mapMutations('common', [ 'setDispType', 'setQuestionList', ]), /** * タイトルとボタン名を設定 * * 設定ファイルの内容からタイトルとボタン名を設定 */ setSettingName() { this.title = this.settingOption.title; this.btnName = this.settingOption.btnName; }, /** * 問題コンポーネントを表示 */ showQuestionCoponent() { this.readQuestions(); // 問題情報を読み込む }, /** * 問題情報を読み込む */ readQuestions() { axios.get(this.selectQuestionPath).then((response) => { this.setReadQuestions(response.data.questionList); this.setDispType("questions"); }).catch((error) => { console.log(error); }) }, /** * 読み込んだ問題情報をstoreに格納 * * @param {object[]} questionList 問題情報 */ setReadQuestions(questionList) { // 問題をランダムにする if (this.settingOption.randam) { questionList = this.shuffleArray(questionList); } // 選択肢をランダムにする if (this.settingOption.choiceRandam) { questionList.forEach((questionInfo, index) => { questionInfo.choice = this.shuffleArray(questionInfo.choice); }); } this.setQuestionList(questionList); // 問題情報をstoreに格納 }, /** * 選択した問題集のファイルパスを設定 * * @param {string} filePath 問題集のファイルパス */ selectQuestion(filePath) { // 既に選択している場合は選択状態を解除 if (filePath === this.selectQuestionPath) { this.selectQuestionPath = ''; } else { this.selectQuestionPath = filePath; } } }, }; </script> ③問題解答画面コンポーネント(/components/questions.vue) 問題を解答する画面前の問題に【戻る】ボタン押下で1つ前に解答した問題に戻ることも出来る。問題内容と選択肢は問題コンポーネントを呼び出して表示 <template> <div class="questionsComponent"> <div class="header"> <button class="btn btn-back" @click="showPreviousQuestion()" :disabled="qIndex === 0">前の問題に戻る</button> </div> <div class="contents"> <div class="quetion-area"> <question-info :qIndex="qIndex" :questionInfo="questionInfo" :answerList="selectAnswerList" :mode="'question'"></question-info> </div> <div class="btns-area"> <button class="btn" @click="answerQuestion(qIndex+1)">解答</button> </div> </div> </div> </template> <script> import { mapState, mapGetters, mapMutations } from "vuex"; import QuestionInfo from '~/components/questions/qInfo.vue'; export default { data() { return { questionInfo: {}, // 表示する問題情報 qIndex: 0, // 問題のインデックス correctCount: 0, // 正解数 selectAnswerList: [], // 選択した解答リスト } }, created() { this.showQustion(); // 表示する問題情報をセット }, computed: { ...mapState('common', [ 'questionList', ]), ...mapGetters('common', [ 'getSelectChoiceStore', ]), }, components: { QuestionInfo, }, methods: { ...mapMutations('common', [ 'setDispType', 'setCorrectCount', 'setSelectAnswerList', ]), /** * 表示する問題情報をセット */ showQustion() { this.questionInfo = this.questionList[this.qIndex]; }, /** * 解答ボタン押下処理 * * 答え合わせをして、次の問題を表示。最後の問題の場合は解答結果画面を表示。 * * @param {int} nextIndex 次の問題のインデックス */ answerQuestion(nextIndex) { this.checkCorrectAnswer(); this.qIndex = nextIndex; if (this.questionList[this.qIndex]) { this.selectChoise = ''; this.showQustion(); } else { this.setCorrectCount(this.correctCount); this.setSelectAnswerList(this.selectAnswerList); this.setDispType("result"); } }, /** * 前の問題に戻るボタン押下処理 * * 前の問題を表示。選択肢のラジオボタンも自分が解答した選択肢の値にする。 */ showPreviousQuestion() { this.qIndex = this.qIndex - 1; // 問題のインデックスを一つ前に設定 this.showQustion(); // 前の問題を表示 this.selectChoise = this.selectAnswerList[this.qIndex]; // 前の問題で選択した選択肢を設定 }, /** * 選択した問題の答えチェック * * 正解の場合は正解数をインクリメントする。解答リストに自分が選択した解答を追加。 */ checkCorrectAnswer() { if (this.getSelectChoiceStore === this.questionInfo.answer) { this.correctCount++; } this.selectAnswerList[this.qIndex] = this.getSelectChoiceStore; } }, }; </script> ④解答結果画面コンポーネント(/components/result.vue) 答え合わせをする画面正答率だけではなく、自分が選択した解答と正しい解答を色分けで表示している。 <template> <div class="resultComponent"> <h2 class="title">全{{questionList.length}}問中、{{correctCount}}問正解です。</h2> <div class="contents"> <div class="answers"> <ul> <li v-for="(questionInfo, qIndex) in questionList" :key="qIndex"> <question-info :qIndex="qIndex" :questionInfo="questionInfo" :mode="'answer'"></question-info> </li> </ul> </div> <div class="btns-area"> <button class="btn" @click="backTop()">終了</button> </div> </div> </div> </template> <script> import { mapState, mapMutations } from "vuex"; import QuestionInfo from '~/components/questions/qInfo.vue'; export default { data() { return { } }, created () { }, computed: { ...mapState('common', [ 'correctCount', 'questionList', ]), }, components: { QuestionInfo, }, methods: { ...mapMutations('common',[ 'setDispType', ]), /** * トップ画面に戻る */ backTop() { this.setDispType("top"); } }, }; </script> ⑤問題コンポーネント(/components/questions/qInfo.vue) 問題と選択肢を表示するコンポーネント問題解答画面と解答結果画面の両方にて本コンポーネントを呼び出している。 <template> <div class="qInfoComponent"> <div class="header"> <p class="title"> 問{{qIndex+1}} <span v-if="mode === 'answer' && questionInfo.answer === selectAnswe...