javascriptでクイズを作成したい

###javascriptでクイズを作成したい

javascriptでクイズを作成しています。
（構成）
問題表示➡︎テキストで打ち込んで答える➡︎正解、不正解のページへ➡︎次の問題へ・・・結果発表

（発生している問題点）
1問目の正誤のページへ飛んでから、2問目に進むにはどうすれば良いのでしょうか？
また、最後に結果表示も行いたいのですが、どれだけ調べても私の力量では実装に及べませんでした。
初歩的な質問で大変申し訳ありませんが、宜しくお願いします。

該当のソースコード

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<link href="../../reset.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script>
	function check(){
		if (document.que1.answer.value=="jump"){
				location.href="yes_no/jump_yes/jump.html";
		
		}
		else {
				location.href="yes_no/jump_no/index.html"
		}
	}
	
var img_file = ["images/answer_no.gif","images/answer_yes.gif"];
	
</script>

</head>
<body>
<div class="wrapper">
  
  　<form name="que1">
		<div class="source">
		 Q1　ジャンプ
		</div><br><br>
		<input type="text" name="answer" class="answer">
		<input class="ok" type="button" onClick="check()">
　</form><!--que1_end-->

　
</div>
</body>
</html>

stdio

2019/01/18 07:23

>>具体的なコードも教えて頂ければ幸いです。それはできません。自分で考えて下さい。外注でしたら適当な業者でもお使い下さい。

行動規範の内容に同意します

回答3件

1問目の正誤のページへ飛んでから、2問目に進むにはどうすればいいのでしょうか？

JavaScriptでは無理。
本当に無理なの？かと言われれば別にできるけど、
JavaScriptでやるという意味を「本当に」「ちゃんと」理解出来ますか？？？？って話

具体的なコードも教えて頂ければ幸いです。

これも無理
貴方の満足行くものを作り込むのに平気で数週間掛かる。
一般的なフリーランスの人間を1日拘束するなら毎日5万は欲しい、出せる？

企業でも尻込みするのに個人じゃなおさら無理だよね。
でもフリーランスは月百万稼いでも税金で死ぬほど持って行かれるから、
5万/日ってそこらのサラリーマン程度の給料しか残らないんだわ。

だから死ぬ気で勉強して自分で書くしかない。

何をどう勉強していけば良いかも含めてざっくりとアドバイスしていくよ。

javascriptでクイズを作成したい

そもそものWebサーバの仕組みが分かってないと何も作れないので、
Webサーバとはなんぞやを覚えよう。
Webサーバとブラウザの流れは大体こんな感じ

インターネット上に公開しているマシンでHTTPリクエストを受け付けるソフト(Apache等)を起動する
訪問者がChrome等のブラウザでHTTPリクエストをサーバへ送信
リクエスト内容を元にHTML、CSS、JS、画像ファイル等をHTTPレスポンスとして返す
ブラウザはHTTPレスポンスを元にページを解析して画面上に表示(レンダリング)
JavaScriptのコードを発見したら、それを元にHTMLを動的に書き換えることで画面上の表示内容を制御する

ここまでで、質問者さんがやろうとしている事と、やってる事に矛盾が一つ発生する

問題表示➡︎テキストで打ち込んで答える➡︎正解、不正解のページへ➡︎次の問題へ・・・結果発表

「正解、不正解のページへ」って言ってるね。
これは一般的に「ページ遷移」と呼ばれてて、ページ遷移をするとどうなるか？
上の5項目で言うと今のページの情報全部捨てて2番からやり直してるんだわ。

Webサーバとブラウザで行う通信は基本的に1回限りのやり取りなので、
他のページへ遷移してしまうと情報が全て消える。
つまり問題が5個あったとして今までの正解/不正解を覚えておくって事が非常に困難であることが言える。

だから「どれだけ調べても私の力量では実装に及べませんでした。」ってなるのは当然だし、
突破するにはスキルや知識が必要になってくる。

よろしくお願いします。

その得意分野はJavaScriptではなくPHPだね。

技術力があって自前でNode.jsやRuby、Python…HTTPリクエストを捌けるなら何の言語で実装しても良いけど、
Apacheという既成品のモジュールとして簡単に組め込めて今日から動的なHTMLが生成出来るようになるPHPは最も導入が楽。
これがPHPを勧めた理由。

PHPではセッションと呼ばれる手法でアクセス情報を残す事ができる。

ブラウザのクッキーにID値をもたせ、PHP側でID値を元に好きな値を保存する。
ブラウザは裏でHTTPリクエストの度にクッキーを持参して手渡してくるので、
HTTPリクエストを繰り返しても、以前のやり取りのうち、残したい情報を残せるわけだ。

1ページ目の回答の正誤を記録しておいて、5問目終わった時に正答率がどの程度かという難題も、
セッションを使えば現実的な難易度で実現できそうということが分かるはず。

なのでJavaScriptよりは先にPHP等のサーバーサイド言語を障る事を強く勧めるよ。
サーバーサイドの言語を手足のように扱えれば、相乗効果でJavaScriptですごい機能も作れるようになるからね。

投稿2019/01/18 07:53

miyabi-sun

総合スコア21158

miyabi-sun

2019/01/18 08:21 編集

JavaScriptだけで作れる理由は2つ、「クッキーの存在」とSPA(シングルページアプリケーション) これのどちらかだけでも質問文にあるクイズゲームを構築することは可能。でもクイズってのは答えが隠れているものだと思うけど、答えがHTMLやJSファイル上に書いてあるわけだし、クッキーは改ざんが簡単。カンニングが簡単に出来たらつまらないよね。この辺の事情からJavaScriptだけで答えを隠しつつ実装することはほぼ不可能。結局答えの部分を隠すためにPHP(やその他サーバサイドでHTTP通信を待ち受ける仕組み)とJavaScriptを併用する話になってくる。だから「正解はPHPをやれ」だと判断してそっちの方向で話を持っていくことにしたのね。

行動規範の内容に同意します

クイズを作るという事は理解できますが、
javascriptを使うという点が理解出来ません。

単純にクイズ作りたいだけなのであればcのコンパイラで良いのではと思ってしまいます。
全体的に質問の仕方が下手だと思うので、やりたいことをこう少し掘り下げてから質問して下さい。

投稿2019/01/18 07:45

stdio

総合スコア3307

開発環境次第なところはありますが、
・サーバサイドでの処理が一切ない
・サーバサイドでの処理も可能
なのかによって回答は変わるかと思います。

とりあえずこういう方向でやればできそうっていうのを書いておきます。

1問目の正誤のページへ飛んでから、2問目に進むにはどうすればいいのでしょうか？

リンク付きのボタンなりテキストなりを正誤ページにつけておいて、
それが押されたらページ遷移するようにすれば良いかと思います。

最後に結果表示も行いたいのですが、どれだけ調べても私の力量では実装に及べませんでした。

サーバサイドの処理ができるなら、回答と答えを判定して得点計算していけば良いかと思います。
あるいはセッションとかCookieに値を保存しておいて結果画面でそれらを見るのでも可能ですかね。

サーバサイドの処理がないのなら……ページ遷移なしにしてJavaScriptで表示切り替えすれば
JavaScriptで値を保ったまま結果表示画面まで進めるかと。
あるいは全パターン分のページを作っておけばなんとか。。。
例1） Q1.html → Q1OK.html →　Q1OK_Q2.html → Q1OK_Q2NG.html　→ ...
例2) Q1.html → Q1NG.html → Q1NG_Q2.html → Q1NG_Q2NG.html → ...

方向性が見えてないからコードを書けないだけだと思うので、
とりあえずコードは自力で頑張ってください。

投稿2019/01/18 07:26