第111回：PHPでクイズアプリ開発ver3.0。

こんにちは。NGE16です。

今回からクラスを作成して、システム開発を行なっていきたいと思います。

クラスの作成

クラスを読み込む記述を加えていきます。

require_once(__DIR__ . '/Quiz.php');

インスタンスを作成していきます。

$quiz = new MyApp\Quiz();

データの取得をquizメソッドに変更していきます。

$data = $quiz->getCurrentQuiz();

quiz.phpを作成して、クラスを作成します。
index.phpの記述も同時に移動させます。

<?php

namespace MyApp;

class Quiz {
  provate $_quizSet = [];

  public function __construct() {
    $this->_setup();
    $current_num = 0;
    
  }

  private function _setup() {
    $this->_quizSet[] = [
      'q' => 'Aの答えは??',
      'a' => ['A0', 'A1', 'A2', 'A3']
    ];
    $this->_quizSet[] = [
      'q' => 'Bの答えは??',
      'a' => ['B0', 'B1', 'B2', 'B3']
    ];
    $this->_quizSet[] = [
      'q' => 'Cの答えは??',
      'a' => ['C0', 'C1', 'C2', 'C3']
    ];
  }
}

getCurrentQuizクラスを作成します。

public function getCurrentQuiz() {
  return $this->_quizSet[$_SESSION['current_num']];
}

コンストラクタにセットしていくために、以下の記述を加えていきます。

if (!isset($_SESSION['current_num'])) {
  $_SESSION['current_num'] = 0;
}

jQueryの導入

クイズの選択肢をクリックした時に処理を加えていくために、jQueryを導入していきます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

自分で作る処理は別のファイルとして読み込む設定を行います。

<script src="quiz.js"></script>

quiz.jsを作成して、以下の記述を加えていきます。

$(function() {
  'use strict';

  $('.answer').on('click', function() {
    var $selected = $(this);
    var answer = $selected.text();

    $.post('/_answer.php', {

    }).done(function(res) {
      if (answer === res.correct_answer) {
      } else {

      }
  });

});

今回は以上になります。

次回は、Ajax処理や正誤処理を行なっていきたいと思います。
"PHPでクイズアプリ開発ver4.0。" へ続く。