質問: ### 前提・実現したいこと 現在、問題が表示され、inputタグに四字熟語の意味をタイピングすると正解、不正解となるスマホWEBアプリの開発をしています。 要件は以下の通りです。 1、データベースから問題を取得してくる。10個がゲーム表示数の最大だが、5個とかもあり得る。最初の画面、最後の画面、問題の画面(複数)をそれぞれ出していく。 2、スタートボタンを押すと、右にスクロール、一問ずつ表示され、inputタグに答えを入れて、「合ってる?」ボタンを押すと正解か不正解かでてくる。 3、正解になると、音が出て、正当数が加算され、右にスクロールされ、次の問題にいく。不正解になると音がでて、その問題のまま(「わからない」ボタンを押された場合も次にいく。) 4、最後までいくと、結果が表示される。 設計 答えをdisplay:noneとして埋め込んでおき、jQueryにて近くにあるinputタグの内容と整合性をとり、合致していれば次の問題へ進む。 ### 発生している問題・エラーメッセージ 1、データベースから問題と問題数を取得 2、問題数を元に横に表示されるwidthを(最初+最後+問題数)×100に設定して、それをタグ内に入れる。(stye="width: 1200%"など) づまずいているところ 3、スタートボタンを押すと、右にスクロールしない。 ### 現在のソースコード ``` "人はよい行いをすればよい報いがあり、悪い行いをすれば悪い報いがあるということ。", "answer" => "因果応報"], ["problem" => "将来の成功を期して苦労に耐えること。", "answer" => "臥薪嘗胆"], ["problem" => "物事を完成するために、最後に加える大切な仕上げのたとえ。", "answer" => "画竜点睛"], ]; shuffle($ar_yojis); ?> 四字熟語ゲーム 四字熟語ゲーム 問題:= count($ar_yojis);?> 開始 '; echo ''.$ar_yoji["problem"].''; echo ''.$ar_yoji["answer"].''; echo ''; echo ''; echo ''; echo ''; } ?> 結果 あなたは= count($ar_yojis)?>問中、〇問正解です。 ``` ``` .game_wrapper{ border: 1px solid #000; border-radius: 10px; background: #DDD; min-height: 500px; /*overflow:hidden;*/ /*上をコメントアウトしたりすると問題一覧が見える*/ } #mask{ } .item{ padding: 10px; float:left; background: #f7c; min-height: 500px; } .answer{ display: none; } ``` ### その他の質問・疑問点 1. inputタグを使用する場合、Formタグは必要なのか? 2. inputタグに文字列が入力されたあとにエンターキーを押すと「合ってる?」ボタンのアクションはinput type="submit"じゃなければいけないか? 3. submitボタンが複数あっても大丈夫か。 jQueryのコードと、その他の疑問点を伺いたく思います。 ※htmlspecialcharsは省略しました。
回答: > > 右へ移動したい。ここの部分がわからない。 > > > jQueryに横スクロールさせるメソッドがありますが、それではダメですか? > > Set the current horizontal position of the scroll bar for each of the set of matched elements. > > .scrollLeft() | jQuery API Documentation > > >