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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

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

Q&A

解決済

2回答

1413閲覧

JavaScriptで入力型のクイズゲームを作成したい。

daigakuin

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

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

0グッド

0クリップ

投稿2019/01/08 07:03

前提・実現したいこと

JavaScriptで文字を入力するタイプのクイズゲームを作成したいです。
答えを入力し、回答ボタンを押すと正解か不正解のリンク(タブ)に飛ぶように設定したいです。
私の今の力量では調べても分からなかったので助けていただきたいです。

●正解の単語を2つ以上設定する変数(?)はあっているのか
●間違った答えを入力しても正解のリンクに飛んでしまう
●入力フォームによくある「ここに答えを入力」という文章を追加するにはどうしたらいいか

以上の3点がわかりません。
よろしくお願い致します。

発生している問題・エラーメッセージ

問題は上記に書いた通りです。 エラーコードは出ていませんでした。

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>第1問</title> <script src="jquery-3.3.1.min.js"> </script> <style> body{ max-width: 100%; height: auto; background-color: #F0EBEB; font-family: "游ゴシック"; font-weight: bold; } #container1 { position: relative; width: 100%; height: auto !important; height: 100%; min-height: 100%; } #container2 { position: relative; width: 100%; height: auto !important; height: 100%; min-height: 100%; } header{ width: 100%; height: 150px; background-color: #F89174; margin-bottom: 10px; position:fixed; top: 0; } #img{ width: auto; text-align: center; } #main{ width: 100%; height: auto; padding-bottom: 100px; padding-top: 100px; } #moji{ color: #5B5B5B; } #moji h1{ font-size: 33px; text-align: center; margin-top: 100px; } #moji p{ font-size: 40px; text-align: center; } #mondai{ width: auto; height: auto; text-align: center; } #mondai img{ width: 80%; max-width: 800px; box-shadow: 6px 6px 15px #DAD2D2; } form{ width: 600px; margin:40px 0px; } #ran{ border:0; font-size:60px; color:#5B5B5B; border:none; width:440px; height: 100px; display: inline; font-family: "游ゴシック"; font-weight: bold; border-radius: 2px; box-shadow: 6px 6px 15px #DAD2D2; margin-right: 10px; } #osu{ width: 140px; height: 100px; display: inline; font-size: 50px; font-family: "游ゴシック"; font-weight: bold; letter-spacing: 5px; color: #F0EBEB; background-color: #AAD6EC; border: none; border-radius: 2px; box-shadow: 6px 6px 15px #DAD2D2; text-align: center; cursor:pointer; } #botan{ width: 600px; height: 120px; background-color: #AAD6EC; border-radius: 2px; color: #F0EBEB; font-size: 60px; text-decoration: none; cursor: pointer; box-shadow: 6px 6px 15px #DAD2D2; display: block; letter-spacing: 5px; text-align: center; line-height: 130px; margin: 40px 0px; } #bottun{ width: 600px; height: auto; display:block; margin-left: auto; margin-right: auto; margin-top: 100px; margin-bottom: auto; } footer{ width: 100%; height: 70px; background-color: #F89174; margin-top: 10px; position:fixed; bottom: 0; } footer p{ width: auto; height: auto; text-align: center; font-size: 30px; font-weight: bold; color: #F0EBEB; margin: 0; padding: 10px 0px 0px 0px; } </style> </head> <body> <div id="base"> <!--問題--> <div id="container1" class="start"> <header> <div id="img"> <img src="logo.png"> </div> </header> <div id="main"> <div id="moji"> <h1></h1> <p>- 第 1 問 -</p> </div> <div id="mondai"> <img src="kari.png"> </div> <div id="bottun"> <form name="que1"> <input id="ran" type="text" name="answer"> <input id="osu" type="button" value="回答" onclick="check()"> </form> <a id="botan" href="#container2" class="nav">ヒント</a> <a id="botan" href="index.html">トップ</a> </div> </div> <footer> <p>&copy; NAZOTOKI</p> </footer> </div> <script> function check(){if(document.que1.answer.value == "宮本武蔵","あ"){window.location.href = 'seikai1.html';}   else {window.location.href = 'huseikai1.html';}} </script> <!--ヒント--> <div id="container2" class="start"> <header> <div id="img"> <img src="logo.png"> </div> </header> <div id="main"> <div id="moji"> <h1></h1> <p>- ヒ ン ト -</p> </div> <div id="mondai"> <img src="kari.png"> </div> <div id="bottun"> <a id="botan" href="#container1" class="nav">問題に戻る</a> <a id="botan" href="#container5" class="nav">解説</a> <a id="botan" href="index.html">トップ</a> </div> </div> <footer> <p>&copy; NAZOTOKI</p> </footer> </div> <script> $(function(){ $(".start").hide(); $("#container1").show(); $("#container1 a.nav").click(function(){ $("#container1").hide(); $("#container2").show(); }); $("#container2 a.nav").click(function(){ $("#container2").hide(); $("#container1").show(); }); }); </script> <!--解説--> <div id="container5" class="start"> <header> <div id="img"> <img src="logo.png"> </div> </header> <div id="main"> <div id="moji"> <h1></h1> <p>- 解 説 -</p> </div> <div id="mondai"> <img src="kari.png"> </div> <div id="bottun"> <a id="botan" href="#">シェア</a> <a id="botan" href="index.html">トップ</a> </div> </div> <footer> <p>&copy; NAZOTOKI</p> </footer> </div> <script> $(function(){ $(".start").hide(); $("#container2").show(); $("#container2 a.nav").click(function(){ $("#container2").hide(); $("#container5").show(); }); $("#container5 a.nav").click(function(){ $("#container5").hide(); $("#container2").show(); }); }); </script> </div> </body> </html>

試したこと

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

m.ts10806

2019/01/08 08:02

答えをコードに書いてしまうと解答者が見える問題はどうにかした方が良いかと。
daigakuin

2019/01/09 05:33

確かにそうですね… 私の今の知識では、どうすることもできないので教えていただきたいです。
m.ts10806

2019/01/09 05:34

DBに持つしかないですね。サーバー側の言語(例えばPHPなど)を勉強してください。
daigakuin

2019/01/09 05:36

頑張ります…!
guest

回答2

0

ベストアンサー

正解の単語を2つ以上設定する変数(?)はあっているのか

まさにここが不適切なところです。配列にして、["宮本武蔵", "musasi"].includes(document.que1.answer.value)のように判定しましょう
(答え群が、入力値を、含む(includes)か、でArray.prototype.includesはboolを返してくれます)

入力フォームによくある「ここに答えを入力」という文章を追加するにはどうしたらいいか

inputにplaceholderを設定しましょう

投稿2019/01/08 07:14

papinianus

総合スコア12705

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

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

papinianus

2019/01/08 07:16

ちなみにif(some == else , "あ")は常にtrueになりますが、意図してこういう書きかたをすることはないので、説明を割愛しています。
miyabi-sun

2019/01/08 07:32 編集

これだけだと説明が不足しているように思えます。 一般的なクイズでは選択肢が4個程度存在し、 そのうち2個の正解のみを選択したケースのみ正解になるでしょう。 Array.prototype.includesは配列とStringの比較しかできないので、 ループを回す等して回答数と正解数を足した回数で相互比較して全てtrueである事を確認する必要があります。 (単方向だけだと1個もチェック付けなかったり、全てのチェックで正解になるケースが生まれてしまう為) 別路線での回答を考えた方が良いかもしれません。
papinianus

2019/01/08 07:45 編集

今回は賛同いたしかねます。 サンプルが入力問題であること(placeholderを置きたいと言っていることからしても今のプログラム力として、入力しか作れないからの妥協ではないと推測したこと)から、この回答にしています。 また、someなどではなくincludesにしているのも、文字列回答だからこそ、なので別の回答は(質問編集がなされない限り)考えておりません。 質問において、複数の正解があるのは、「1月」と「一月」と「1月」を許容したい(入力だからこそ)ではないかと解釈しています。 -- 奈良、三重、群馬、長野、愛媛、のうち、海に面している県は、というクイズの正解判定だとすれば、lengthと、everyで考えようと思います。
daigakuin

2019/01/09 05:34

ありがとうございます! 解決しました!
guest

0

とりあえず「ここに答えを入力」は placeholder を使えば設定できますよ~

投稿2019/01/08 07:11

azuapricot

総合スコア2341

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

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

daigakuin

2019/01/09 05:34

回答ありがとうございます。 解決しました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問