質問編集履歴

タイトル変更ミス

2021/01/24 06:15

投稿

CCCPplusUSA

スコア3

test CHANGED Viewed

	@@ -1 +1 @@
1	- どこがうまく動いていない~~のかわからない~~（ボタンをクリック⇒$.ajax⇒ServletのdoGet()~~⇒JavaBeans~~）
1	+ $.ajaxのdataがうまく送れていない（ボタンをクリック⇒$.ajax⇒ServletのdoGet()）

test CHANGED Viewed

File without changes

インデントを揃えた&JavaBeansがいらないことに気づいた&ServletのanswerButtonCountUpValueにstaticが必要だった

2021/01/24 06:15

投稿

CCCPplusUSA

スコア3

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,4 +1,4 @@
-id = "question"に表示される質問「1+1は」に対しid = "input"のテキストフォームに「２です」と入力して
+id = "question"に表示される質問「アルファベットの最初の一文字を大文字で答えてください。」に対しid = "input"のテキストフォームに「A」と入力して
 id = "answerButton"の「答える」ボタンをクリックしても「不正解です」
@@ -18,8 +18,6 @@
 <html>
 <head>
  <meta charset="UTF-8">
@@ -28,16 +26,12 @@
 </head>
 <body>
 <h1 id="title">10分以内に質問に答えよう！</h1>
  <nav>
    <ul id = "time"></ul>
    <ul id = "question"></ul>
@@ -46,20 +40,14 @@
    <ul id = "answer"></ul>
  </nav>
  <p>
    <button id="startButton">スタート</button>
  </p>
  <script src = "jquery-3.5.1.min.js"></script>
  <script src = "index.js"></script>
@@ -76,7 +64,7 @@
 var setTime = 600;
-var answerButtonCountUpValue;
+var answerButtonCountUpValue = 0;
@@ -86,10 +74,6 @@
-answerButtonCountUpValue = 0;
 $("#startButton").on("click", function() {
  timerID = setInterval(function(){
@@ -110,31 +94,31 @@
  var milli = Math.floor((setTime - Math.floor(setTime)) * 100);
- $("#time").html((min < 10 ? "0" + min : min) + ":" + (sec < 10 ? "0" + sec : sec) +
+ $("#time").html((min < 10 ? "0" + min : min) + ":" + (sec < 10 ? "0" + sec : sec) + ":" + (milli < 10 ? "0" + milli : milli));
- ":" + (milli < 10 ? "0" + milli : milli));
-	}
+        }
-                                  }, 10);
+                                   }, 10);
- $("#title").html("");
+$("#title").html("");
- $("#question").html("1+1は？");
+$("#question").html("アルファベットの最初の一文字を大文字で答えてください。");
- $("<input>", {
+$("<input>", {
-  type: "text",
+ type: "text",
-  id  : "input",
+ id  : "input",
-               }).appendTo("#input_answer");
+              }).appendTo("#input_answer");
- $("#startButton").remove();
+$("#startButton").remove();
- $("p").append("<button id=\"answerButton\"></button>");
+$("p").append("<button id=\"answerButton\"></button>");
- $("#answerButton").html("答える");
+$("#answerButton").html("答える");
                                           });
@@ -142,264 +126,228 @@
 //urlAnswerServletと関わりがあるのはここだけ
+//「スタートボタン」をクリックしたときに作られた「答えるボタン」をクリックしたら
 $("p").on("click", "#answerButton", function() {
+$.ajax({
+     type    : "GET",
+scriptCharset: "UTF-8",
+     url     : "http://localhost:8080/QAcountdown/urlAnswerServlet",
+     data    : {answer : $("#input").val()}
+		}).done(function(data) {
+answerButtonCountUpValue += 1;
+if(answerButtonCountUpValue < 5) {
+$("#answer").html(data);
+$("#answerButton").remove();
+$("p").append("<button id=\"nextButton\"></button>");
+$("#nextButton").html("次へ");
+} else if (answerButtonCountUpValue == 5) {
+$("#answer").html(data);
+$("#answerButton").remove();
+$("p").append("<button id=\"nextButton\"></button>");
+$("#nextButton").html("終える");
+                                           }
+	     }).fail(function() {
+		    alert("読み込み失敗");
+		                     });
+                                                });
+//「答えるボタン」をクリックしてできたものに問題を追加するだけ
+//「次へボタン」or「終えるボタン」をクリック
+$("p").on("click", "#nextButton", function() {
+$("#input").remove();
+$("<input>", {
+type: "text",
+id  : "input",
+             }).appendTo("#input_answer");
+$("#answer").html("");
+$("#nextButton").remove();
+$("p").append("<button id=\"answerButton\"></button>");
+$("#answerButton").html("答える");
+if(answerButtonCountUpValue === 1) {
+$("#question").html("アルファベットの二文字目を大文字で答えてください。");
+} else if (answerButtonCountUpValue === 2) {
+$("#question").html("アルファベットの三文字目を大文字で答えてください。");
+} else if (answerButtonCountUpValue === 3) {
+$("#question").html("アルファベットの四文字目を大文字で答えてください。");
+} else if (answerButtonCountUpValue === 4) {
+$("#question").html("アルファベットの五文字目を大文字で答えてください。");
+} else if (answerButtonCountUpValue === 5) {
+$("#title").html("終了です！");
+clearInterval(timerID);
+$("#question").html("");
+$("#input").remove();
+$("#answerButton").remove();
+                                            }
+                                              });
+             });
+```
+```Java
+package servlet;
+import java.io.IOException;
+import java.io.PrintWriter;
+import java.util.HashMap;
+import java.util.Map;
+import javax.servlet.ServletConfig;
+import javax.servlet.ServletException;
+import javax.servlet.annotation.WebServlet;
+import javax.servlet.http.HttpServlet;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+@WebServlet(urlPatterns={"/urlAnswerServlet"})
+public class urlAnswerServlet extends HttpServlet {
+ static int answerButtonCountUpValue;
+ static String[] response_answer = {"A", "B", "C", "D", "E"};
+ private static final long serialVersionUID = 1L;
+public urlAnswerServlet() {
+ super();
+	                       }
+public void init(ServletConfig config) throws ServletException{
+ super.init(config);
+ answerButtonCountUpValue = 0;
+	                                                            }
+protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
+ try {
+ //パラメータ取得
+ String input_answer = request.getParameter("answer");
+ //doGet()が呼ばれた回数をカウント
  answerButtonCountUpValue++;
- $.ajax({
-      type    : "GET",
- scriptCharset: "UTF-8",
-      url     : "http://localhost:8080/QAcountdown/urlAnswerServlet",
-      data    : {answer : $("#input").val()}
- }).done(function(data) {
- if(answerButtonCountUpValue <= 4) {
- $("#answer").html(data);
- $("#answerButton").remove();
- $("p").append("<button id=\"nextButton\"></button>");
- $("#nextButton").html("次へ");
- } else if (answerButtonCountUpValue == 5) {
- $("#answer").html(data);
- $("#answerButton").remove();
- $("p").append("<button id=\"nextButton\"></button>");
- $("#nextButton").html("終える");
-                                           }
-		        }).fail(function() {
-			   alert("読み込み失敗");
-		                           });
-});
-//answerボタンをクリックしてできたものに問題を追加するだけ
- $("p").on("click", "#nextButton", function() {
-    $("#input").remove();
-    $("<input>", {
-     type: "text",
-     id  : "input",
-                 }).appendTo("#input_answer");
-    $("#answer").html("");
-    $("#nextButton").remove();
-    $("p").append("<button id=\"answerButton\"></button>");
-    $("#answerButton").html("答える");
-    if(answerButtonCountUpValue === 1) {
-    $("#question").html("2+2は？");
-    } else if (answerButtonCountUpValue === 2) {
-    $("#question").html("3+3は？");
-    } else if (answerButtonCountUpValue === 3) {
-    $("#question").html("4+4は？");
-    } else if (answerButtonCountUpValue === 4) {
-    $("#question").html("5+5は？");
-    } else if (answerButtonCountUpValue === 5) {
-    $("#title").html("終了です！");
-    clearInterval(timerID);
-    $("#question").html("");
-    $("#input").remove();
-    $("#answerButton").remove();
-    }
-                                          });
-             });
+ Map<Integer, String> QA = new HashMap<>();
+ QA.put(answerButtonCountUpValue, response_answer[(answerButtonCountUpValue - 1)]);
+ //ヘッダ設定
+ response.setContentType("text/html; charset= UTF-8");
+ //pwオブジェクト
+ PrintWriter pw = response.getWriter();
+ if(input_answer.equals(QA.get(answerButtonCountUpValue))) {
+ pw.print("正解です。");
+ } else {
+ pw.print("不正解です。");
+         }
+ //クローズ
+ pw.close();
+ } catch(Exception e) {
+ e.printStackTrace();
+                       }
+                                                                                                                      }
+}
 ```
-```Java
-package servlet;
-import java.io.IOException;
-import java.io.PrintWriter;
-import javax.servlet.ServletConfig;
-import javax.servlet.ServletContext;
-import javax.servlet.ServletException;
-import javax.servlet.annotation.WebServlet;
-import javax.servlet.http.HttpServlet;
-import javax.servlet.http.HttpServletRequest;
-import javax.servlet.http.HttpServletResponse;
-import model.QandA;
-@WebServlet(urlPatterns={"/urlAnswerServlet"})
-public class urlAnswerServlet extends HttpServlet {
-	int answerButtonCountUpValue;
-	String[] response_answer = {"２です", "４です", "６です", "８です", "１０です"};
-	private static final long serialVersionUID = 1L;
-	public urlAnswerServlet() {
-		super();
-	}
-	public void init(ServletConfig config) throws ServletException{
-		super.init(config);
-		answerButtonCountUpValue = 0;
-	}
-	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
-		try {
-			//パラメータ取得
-	        String input_answer = request.getParameter("answer");
-	        //処理
-	        answerButtonCountUpValue++;
-	        QandA qandA = new QandA(answerButtonCountUpValue, input_answer, response_answer[answerButtonCountUpValue]);
-			ServletContext application = this.getServletContext();
-			application.setAttribute("qandA", qandA);
-			QandA QA = (QandA)application.getAttribute("qandA");
-	        //ヘッダ設定
-	        response.setContentType("text/html; charset= UTF-8");
-	        //pwオブジェクト
-	        PrintWriter pw = response.getWriter();
-	        pw.print(QA.getResponse_answer());
-	        //クローズ
-	        pw.close();
-		    } catch(Exception e) {
-		    	 e.printStackTrace();
-		}
-	}
-}
-```
-```Java
-package model;
-import java.io.Serializable;
-import java.util.HashMap;
-import java.util.Map;
-public class QandA implements Serializable {
-	private int count;
-	private String input_answer;
-	Map<Integer, String> QA = new HashMap<>();
-	public QandA() {}
-	public QandA(int count, String input_answer, String response_answer) {
-		this.count = count;
-		this.input_answer = input_answer;
-		QA.put(count, response_answer);
-	}
-	public String getResponse_answer() {
-		if(QA.get(count) == input_answer) {
-			return "正解です";
-		} else {
-			return "不正解です";
-		        }
-	                                    }
-                                              }
-```