ドットインストールの「phpでクイズアプリを作ろう」というレッスン中なのですが、お手本通りに機能しなかったので調べてみたところ404エラーが発生していました。
スペルミスの可能性を考え、コードを全てお手本通りにコピペしたのですが同じエラーが発生しました。
jquery.min.js:2 POST http://localhost/_answer.php 404 (Not Found) send @ jquery.min.js:2 ajax @ jquery.min.js:2 S.<computed> @ jquery.min.js:2 (anonymous) @ quiz.js:12 dispatch @ jquery.min.js:2 v.handle @ jquery.min.js:2
jquery.min.jsにエラーが発生していましたが、
jqueryのX系を変えてもエラーは変わりませんでした。
他の対処法がわかりません。
お手本はvagrantを用いて書いていますが、自分はxamppで書いています。
よろしくお願いします。
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('/_answer.php', { }).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(); } }); });
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>
_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'); }
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; }