ドットインストールの「phpでクイズアプリを作ろう」を演習中に起きたエラーです。
次のレッスンで追加されたコードを書き足して実行すると、それ以前の部分でエラーが出ました。
エラーメッセージを確認したが原因がわからなかったのでとりあえずコードを書き足す前の状態に戻しましたが、同じエラーが発生。
全く同じコードであるにも関わらず、エラーが発生したので環境に問題があると思い、MacのアップデートとVScodeのアップデートを済ませ、再起動した後試しましたがダメでした。
コード自体はお手本のコードをコピペしているので間違えてはいないです。
表示されたエラーメッセージです。
Notice: Undefined offset: 7 in /Applications/XAMPP/xamppfiles/htdocs/Quiz_php/Quiz.php on line 31 Warning: shuffle() expects parameter 1 to be array, null given in /Applications/XAMPP/xamppfiles/htdocs/Quiz_php/index.php on line 10 Q. Notice: Undefined index: q in /Applications/XAMPP/xamppfiles/htdocs/Quiz_php/index.php on line 27 Warning: Invalid argument supplied for foreach() in /Applications/XAMPP/xamppfiles/htdocs/Quiz_php/index.php on line 29
Quiz.php
<?php namespace MyApp; class Quiz { private $_quizSet = []; public function __construct() { $this->_setup(); if (!isset($_SESSION['current_num'])) { $_SESSION['current_num'] = 0; } } public function checkAnswer() { $correctAnswer = $this->_quizSet[$_SESSION['current_num']]['a'][0]; $_SESSION['current_num']++; return $correctAnswer; } public function isFinished() { return count($this->_quizSet) === $_SESSION['current_num']; } public function reset() { $_SESSION['current_num'] = 0; } public function getCurrentQuiz() { return $this->_quizSet[$_SESSION['current_num']]; } private function _setup() { $this->_quizSet[] = [ 'q' => 'What is A?', 'a' => ['A0', 'A1', 'A2', 'A3'] ]; $this->_quizSet[] = [ 'q' => 'What is B?', 'a' => ['B0', 'B1', 'B2', 'B3'] ]; $this->_quizSet[] = [ 'q' => 'What is C?', 'a' => ['C0', 'C1', 'C2', 'C3'] ]; } }
index.php
<?php require_once(__DIR__ . '/config.php'); require_once(__DIR__ . '/Quiz.php'); $quiz = new MyApp\Quiz(); if (!$quiz->isFinished()) { $data = $quiz->getCurrentQuiz(); shuffle($data['a']); } ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Quiz</title> <link rel="stylesheet" href="styles.css"> </head> <body> <?php if ($quiz->isFinished()) : ?> <a href="">finished!</a> <?php $quiz->reset(); ?> <?php else : ?> <div id="container"> <h1>Q. <?= h($data['q']); ?></h1> <ul> <?php foreach ($data['a'] as $a) : ?> <li class="answer"><?= h($a); ?></li> <?php endforeach; ?> </ul> <div id="btn" class="disabled">Next Question</div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="quiz.js"></script> <?php endif; ?> </body> </html>
styles.css
body { font-size: 16px; font-family: Arial, sans-serif; } #container { width: 500px; margin: 15px auto; } h1, ul > li { border: 1px solid #ddd; border-radius: 5px; } h1 { padding: 10px; height: 50px; font-size: 18px; margin: 0 0 10px; } ul { list-style: none; margin: 0 0 10px; padding: 0; } ul > li { margin-bottom: 7px; padding: 7px 10px; cursor: pointer; } #btn { text-align: center; float: right; width: 100px; padding: 7px; color: #fff; border-radius: 5px; background: #00aaff; box-shadow: 0 4px 0 #0088cc; cursor: pointer; font-size: 14px; } #btn.disabled { opacity: 0.5; } .correct { color: limegreen; font-weight: bold; } .wrong { color: #ddd; } .selected { font-weight: bold; }
_answer.php
<?php require_once(__DIR__ . '/config.php'); require_once(__DIR__ . '/Quiz.php'); $quiz = new MyApp\Quiz(); $correctAnswer = $quiz->checkAnswer(); header('Content-Type: application/json; charset=UTF-8'); echo json_encode([ 'correct_answer' => $correctAnswer ]);
config.php
<?php ini_set('display_errors', 1); session_start(); require_once(__DIR__ . '/functions.php');
functions.php
<?php function h($s) { return htmlspecialchars($s, ENT_QUOTES, 'UTF-8'); }
quiz.js
$(function() { 'use strict'; $('.answer').on('click', function() { var $selected = $(this); if ($selected.hasClass('correct') || $selected.hasClass('wrong')) { return; } $selected.addClass('selected'); var answer = $selected.text(); $.post({ }).done(function(res) { $('.answer').each(function() { if ($(this).text() === res.correct_answer) { $(this).addClass('correct'); } else { $(this).addClass('wrong'); } }); // alert(res.correct_answer); if (answer === res.correct_answer) { // correct! $selected.text(answer + ' ... CORRECT!'); } else { // wrong! $selected.text(answer + ' ... WRONG!'); } $('#btn').removeClass('disabled'); }); }); $('#btn').on('click', function() { if (!$(this).hasClass('disabled')) { location.reload(); } }); });