###前提・実現したいこと
現在、問題が表示され、inputタグに四字熟語の意味をタイピングすると正解、不正解となるスマホWEBアプリの開発をしています。
要件は以下の通りです。
1、データベースから問題を取得してくる。10個がゲーム表示数の最大だが、5個とかもあり得る。最初の画面、最後の画面、問題の画面(複数)をそれぞれ出していく。
2、スタートボタンを押すと、右にスクロール、一問ずつ表示され、inputタグに答えを入れて、「合ってる?」ボタンを押すと正解か不正解かでてくる。
3、正解になると、音が出て、正当数が加算され、右にスクロールされ、次の問題にいく。不正解になると音がでて、その問題のまま(「わからない」ボタンを押された場合も次にいく。)
4、最後までいくと、結果が表示される。
設計
答えをdisplay:noneとして埋め込んでおき、jQueryにて近くにあるinputタグの内容と整合性をとり、合致していれば次の問題へ進む。
###発生している問題・エラーメッセージ
1、データベースから問題と問題数を取得
2、問題数を元に横に表示されるwidthを(最初+最後+問題数)×100に設定して、それをタグ内に入れる。(stye="width: 1200%"など)
づまずいているところ
3、スタートボタンを押すと、右にスクロールしない。
###現在のソースコード
PHP
1<?php 2//データベースから取得してきて配列にする。 3$ar_yojis = [["problem" => "人はよい行いをすればよい報いがあり、悪い行いをすれば悪い報いがあるということ。", "answer" => "因果応報"], 4 ["problem" => "将来の成功を期して苦労に耐えること。", "answer" => "臥薪嘗胆"], 5 ["problem" => "物事を完成するために、最後に加える大切な仕上げのたとえ。", "answer" => "画竜点睛"], 6]; 7shuffle($ar_yojis); 8 9?> 10<!DOCTYPE html> 11<html> 12<head> 13<meta http-equiv="X-UA-Compatible" content="IE=edge"> 14<title>四字熟語ゲーム</title> 15<meta charset="utf-8"> 16<meta name="viewport" content="width=device-width, initial-scale=1"> 17<link rel="stylesheet" type="text/css" href="../reset.css"> 18<link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css"> 19<link rel="stylesheet" type="text/css" href="style.css"> 20<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 21</head> 22<body> 23<div class="container"> 24 <div class="row"> 25 <div class="col-sm-3"></div> 26 <div class="col-sm-6"> 27 <div class="game_wrapper"> 28 <div id="mask" style="width:<?php echo 200 + count($ar_yojis)*100;?>%"> 29 <div class="item" style="width:<?php $item = 100 / ( 2 + count($ar_yojis)); echo $item;?>%"> 30 <h1>四字熟語ゲーム</h1> 31 <p>問題:<?= count($ar_yojis);?></p> 32 <button class="start_button">開始</button> 33 </div> 34 <?php 35 foreach ($ar_yojis as $ar_yoji){ 36 echo '<div class="item" style="width:'.$item.'%">'; 37 echo '<p class="problem">'.$ar_yoji["problem"].'</p>'; 38 echo '<p class="answer">'.$ar_yoji["answer"].'</p>'; 39 echo '<input type="text" />'; 40 echo '<input type="button" value="わからない" />'; 41 echo '<input type="submit" value="あってる?" />'; 42 echo '</div>'; 43 } 44 45 ?> 46 <div class="item" style="width:<?= $item;?>%"> 47 <h1>結果</h1> 48 <p> 49 あなたは<?= count($ar_yojis)?>問中、〇問正解です。 50 </p> 51 </div> 52 </div> 53 </div> 54 <script> 55 $(document).ready(function() { 56 $('.start_button').click(function () { 57 //右へ移動したい。ここの部分がわからない。 58 }); 59 }); 60 </script> 61 </div> 62 <div class="col-sm-3"></div> 63 </div> 64</div> 65 66 67 68</body> 69</body> 70</html> 71
css
1.game_wrapper{ 2 border: 1px solid #000; 3 border-radius: 10px; 4 background: #DDD; 5 min-height: 500px; 6 /*overflow:hidden;*/ 7 /*上をコメントアウトしたりすると問題一覧が見える*/ 8} 9#mask{ 10} 11.item{ 12 padding: 10px; 13 float:left; 14 background: #f7c; 15 min-height: 500px; 16} 17.answer{ 18 display: none; 19} 20
###その他の質問・疑問点
0. inputタグを使用する場合、Formタグは必要なのか?
- inputタグに文字列が入力されたあとにエンターキーを押すと「合ってる?」ボタンのアクションはinput type="submit"じゃなければいけないか?
- submitボタンが複数あっても大丈夫か。
jQueryのコードと、その他の疑問点を伺いたく思います。
※htmlspecialcharsは省略しました。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。