質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

1447閲覧

jQueryで四字熟語を答えるゲームの開発

game_master

総合スコア6

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/12/07 15:25

編集2022/01/12 10:55

###前提・実現したいこと
現在、問題が表示され、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タグは必要なのか?

  1. inputタグに文字列が入力されたあとにエンターキーを押すと「合ってる?」ボタンのアクションはinput type="submit"じゃなければいけないか?
  2. submitボタンが複数あっても大丈夫か。

jQueryのコードと、その他の疑問点を伺いたく思います。
※htmlspecialcharsは省略しました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

右へ移動したい。ここの部分がわからない。

jQueryに横スクロールさせるメソッドがありますが、それではダメですか?

Set the current horizontal position of the scroll bar for each of the set of matched elements.

.scrollLeft() | jQuery API Documentation

投稿2016/12/10 01:09

Lhankor_Mhy

総合スコア35871

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問