# group開発演習（HomeRun）

[-スプレッドシート- 要件定義etc](https://docs.google.com/spreadsheets/d/1lTU9v69BDdT4qs8dL7_yzQZG75nLtFE4utmwAGXjQ4U/edit?usp=sharing)

[-機能書- ユーザマニュアル](https://hackmd.io/@touyou/BkTyZMv5_/edit)

[-スライド- プレゼン資料](https://docs.google.com/presentation/d/1e6rdsPkVg65VdDkq8qvX5T3yyCyKOVYNajaRLlYliuc/edit?usp=sharing)


| メンバー | 役割 | 機能担当 |
| -------- | -------- | -------- |
| 野田 | PL | hoge |
| 山室 | DBL | hoge |
| 佐藤 | WEBL | hoge |
| 眞鍋 | 発表L | hoge |

## 要件定義

| 工程 | ドキュメント | 内容 |
| ---- | ---- | ---- |
| 要件定義 | 要件定義　| 成果物： |
||| ターゲット層：塾に通いづらい小学3年生の男の子 |
||| システムの目的：自宅学習を応援 |
||| メリット：ご褒美機能によるモチベ向上 |
||| 親からのコメントで親子の関係を深める、自己学習能力の向上 |
||| 機能：学習の進捗情報を記録、教材内容を用意、日報コメント |
||| 親画面と子供画面をそれぞれ別で用意　|
||| 実装手段：Java13、Mysql8.0 |

## 基本設計

| 工程 | ドキュメント | 内容 |
| ---- | ---- | ---- |
| 基本設計 | 基本設計　| フローチャート作成 |
||| テーブル定義 |
||| ER図 |
||| PG |
||| test |

## ファイル構造(全体像)

## DB

### ER図


### TABLE定義

> ***user_table***
>> u_name
>> u_id
>> u_pass
>> u_type

drop table user_table;
CREATE TABLE user_table(
     user_id INT primary key not null AUTO_INCREMENT,
     user_name VARCHAR(15) not null,
     user_pass VARCHAR(15) not null,
     user_type VARCHAR(10) not null
     );

> ***qestion_table***
>> q_id
>> q_question
>> q_tag
>> q_done
>> q_details
>> q_ans

drop table qestion_table;
CREATE TABLE qestion_table(
     q_id INT primary key not null AUTO_INCREMENT,
     q_question VARCHAR(100) not null,
     q_tag VARCHAR(10) not null,
     q_done VARCHAR(1),
     q_details VARCHAR(100),
     q_ans VARCHAR(1)
     );

## Java

| 動作環境 | ツール | 機能 |
| ---- | ---- | ---- |
| Java　| eclipse | 画面推移、DB操作 |

### Cont

<details><summary><span style="color: red; ">loginServlet.java</span></summary><div>

package Cont;

import java.io.IOException;
import java.util.List;

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 javax.servlet.http.HttpSession;

import Ent.user;
import Model.loginAction;

@WebServlet("/LoginServlet")
public class loginServlet extends HttpServlet {
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		req.setCharacterEncoding("UTF-8");

		String inputId = req.getParameter("id");//	初期化
		String inputPass = req.getParameter("pass");
		String inputType = req.getParameter("type");
		String move = "login.jsp";
		System.out.println(inputId);
		System.out.println(inputPass);
		System.out.println(inputType);
		loginAction login = new loginAction();

		List<user> userAll = login.login(inputId, inputPass, inputType);

		if (userAll.size() > 0) {
			System.out.println("q");

			HttpSession s = req.getSession();
			s.setAttribute("LOGINUSER", userAll.get(0));

			switch (inputType) {

			case "1"://親メニュー
				move = "menu.jsp";
				break;

			case "2"://子メニュー
				move = "menu2.jsp";
				break;

			case "3"://管理者メニュー
				move = "menu3.jsp";
				break;

			}

		} else {
			req.setAttribute("LOGIN_ERROR", "ログインに失敗しました！");

		}
		req.getRequestDispatcher(move).forward(req, resp);

	}
}

</div></details>

<details><summary><span style="color: red; ">QuestionServlet.java</span></summary><div>

package Cont;

import java.io.IOException;

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.AnswerAction;


/**
 * Servlet implementation class QuestionServlet
 */
@WebServlet("/QuestionServlet")
public class QuestionServlet extends HttpServlet {
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		req.setCharacterEncoding("UTF-8");

		AnswerAction count =  new AnswerAction();
		int countid = count.Countid();
		req.setAttribute("countid", countid);

		req.setAttribute("Question_LIST",
				new AnswerAction().AllQuestion());
		req.getRequestDispatcher("mondai.jsp").forward(req, resp);
	}
}

</div></details>

<details><summary><span style="color: red; ">AnswerCheckServlet.java</span></summary><div>

package Cont;

import java.io.IOException;

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.AnswerAction;

/**
 * Servlet implementation class AnswerCheckServlet
 */
@WebServlet("/AnswerCheckServlet")
public class AnswerCheckServlet extends HttpServlet {

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		req.setCharacterEncoding("UTF-8");
		//int inputNum = Integer.parseInt(req.getParameter("num"));
		int inputid = Integer.parseInt(req.getParameter("id"));
		//int inputid = req.getParameter("");
		String inputDonem = req.getParameter("マル");
		String inputDoneb = req.getParameter("バツ");
		String inputDone = null;

		//System.out.println(req.getParameter("マル"));
		//System.out.println(req.getParameter("バツ"));

		if(req.getParameter("マル") == null) {
			inputDone = inputDoneb;
		}else if(req.getParameter("マル").equals("〇")) {
			inputDone = inputDonem;
		}else {
		}

		AnswerAction count =  new AnswerAction();
		int countid = count.Countid();
		req.setAttribute("countid", countid);


//解答が入力されたら、insertする
		req.setAttribute("Question_LIST",
				new AnswerAction().AllQuestion());
		req.setAttribute("INSERT_DONE", new AnswerAction().IntoDone(inputid, inputDone));

		req.getRequestDispatcher("question2.jsp").forward(req, resp);

	}
}

</div></details>

<details><summary><span style="color: red; ">AnswerCheckServlet2.java</span></summary><div>

package Cont;

import java.io.IOException;

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.AnswerAction;

/**
 * Servlet implementation class AnswerCheckServlet2
 */
@WebServlet("/AnswerCheckServlet2")
public class AnswerCheckServlet2 extends HttpServlet {
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		req.setCharacterEncoding("UTF-8");
		//int inputNum = Integer.parseInt(req.getParameter("num"));
		int inputid = Integer.parseInt(req.getParameter("id"));
		//int inputid = req.getParameter("");
		String inputDonem = req.getParameter("マル");
		String inputDoneb = req.getParameter("バツ");
		String inputDone = null;

		//System.out.println(req.getParameter("マル"));
		//System.out.println(req.getParameter("バツ"));

		if(req.getParameter("マル") == null) {
			inputDone = inputDoneb;
		}else if(req.getParameter("マル").equals("〇")) {
			inputDone = inputDonem;
		}else {
		}

		AnswerAction count =  new AnswerAction();
		int countid = count.Countid();
		req.setAttribute("countid", countid);

		//System.out.println(countid);

		if(inputid>=countid) {
			req.setAttribute("Question_LIST",
					new AnswerAction().AllQuestion());
			req.setAttribute("INSERT_DONE", new AnswerAction().IntoDone(inputid, inputDone));
			req.getRequestDispatcher("Result.jsp").forward(req, resp);
		}else {
			req.setAttribute("Question_LIST",
					new AnswerAction().AllQuestion());
			req.setAttribute("INSERT_DONE", new AnswerAction().IntoDone(inputid, inputDone));
			req.getRequestDispatcher("mondai2.jsp").forward(req, resp);
		}

	}

}

</div></details>

<details><summary><span style="color: red; ">ReslutServlet.java</span></summary><div>

package Cont;

import java.io.IOException;

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.AnswerAction;

/**
 * Servlet implementation class QuestionServlet
 */
@WebServlet("/ResultServlet")
public class ResultServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
AnswerAction count = new  AnswerAction();
    	int countDone = count.CountDone();
    	req.setAttribute("countDone",countDone);

AnswerAction countid = new  AnswerAction();
    	int countId = countid.Countid();
    	req.setAttribute("countId",countId);

    	String move = "Result.jsp";

        req.setCharacterEncoding("UTF-8");
        req.setAttribute("Question_LIST", new AnswerAction().AllQuestion());
        req.getRequestDispatcher(move).forward(req, resp);
    }
}

</div></details>

<details><summary><span style="color: red; ">InsertCheckServlet.java</span></summary><div>

package Cont;

import java.io.IOException;

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.InsertAction;

@WebServlet("/insertCheck")
public class InsertCheckServlet extends HttpServlet {
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		req.setCharacterEncoding("UTF-8");
		String move = "insertCheck.jsp";

		String inputName = req.getParameter("name");
		String inputPass = req.getParameter("pass");
		String inputType = req.getParameter("type");


	if( !inputName.isEmpty() &&  !inputPass.isEmpty() && !inputType.isEmpty()) {
		req.setAttribute("NAME",inputName);
		req.setAttribute("PASS",inputPass);
		req.setAttribute("TYPE",inputType);

	}else {
		req.setAttribute("ERROR","すべての項目に入力して下さい!");
		move = "insert.jsp";
	}

	req.getRequestDispatcher(move).forward(req, resp);

}
}

</div></details>

<details><summary><span style="color: red; ">InsertServlet.java</span></summary><div>

package Cont;
import java.io.IOException;
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.InsertAction;

@WebServlet("/InsertServlet")
public class InsertServlet extends HttpServlet {
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("UTF-8");
		String inputName = req.getParameter("name");
		String inputPass = req.getParameter("pass");
		String inputType = req.getParameter("type");
		/*String move = "nemu.jsp";*/

		String move = "InsertResult.jsp";
		req.setAttribute("ALL_EMPLOYEE",
				new InsertAction().Insert( inputName,inputPass,inputType));
		req.getRequestDispatcher(move).forward(req, resp);

	}
}

</div></details>

### Ent

<details><summary><span style="color: red; ">user.java</span></summary><div>

package Ent;

public class user {

	private int id_Utable;
	private String nm_Utable;
	private String password;
	private String User_type;

	public int getId_Utable() {
		return id_Utable;
	}

	public void setId_Utable(int id_Utable) {
		this.id_Utable = id_Utable;
	}

	public String getNm_Utable() {
		return nm_Utable;
	}

	public void setNm_Utable(String nm_Utable) {
		this.nm_Utable = nm_Utable;
	}

	public String getPassword() {
		return password;
	}

	public void setPassword(String password) {
		this.password = password;
	}

	public String getUser_type() {
		return User_type;
	}

	public void setUser_type(String User_type) {
		this.User_type = User_type;
	}
}

</div></details>

<details><summary><span style="color: red; ">qestion.java</span></summary><div>

package Ent;

public class qestion {

	private int id_Qtable;
	private String q_Qtable;
	private String tag_Qtable;
	private String done_Qtable;
	private String details_Qtable;

	public int getId_Qtable() {
		return id_Qtable;
	}

	public void setId_Qtable(int id_Qtable) {
		this.id_Qtable = id_Qtable;
	}

	public String getq_Qtable() {
		return q_Qtable;
	}

	public void setq_Qtable(String q_Qtable) {
		this.q_Qtable = q_Qtable;
	}

	public String settag_Qtable() {
		return tag_Qtable;
	}

	public void settag_Qtable(String tag_Qtable) {
		this.tag_Qtable = tag_Qtable;
	}

	public String getdone_Qtable() {
		return done_Qtable;
	}

	public void setdone_Qtable(String done_Qtable) {
		this.done_Qtable = done_Qtable;
	}

	public String getdetails_Qtable() {
		return details_Qtable;
	}

	public void setdetails_Qtable(String details_Qtable) {
		this.details_Qtable = details_Qtable;
	}

}

</div></details>

### Model

<details><summary><span style="color: red; ">loginAction.java</span></summary><div>

package Model;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import Ent.user;

public class loginAction {
	public List<user> login(String id, String pass, String type) {
		List<user> allData = new ArrayList<user>();

		try {
			Class.forName("com.mysql.cj.jdbc.Driver");
			Connection con = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/techdb",
					"seed", "Tech_123");

			String sql = "SELECT * FROM user_table WHERE user_id = ? AND user_pass = ? AND user_type=?";
			PreparedStatement pstmt = con.prepareStatement(sql);
			System.out.println(id);
			System.out.println(pass);
			System.out.println(type);
			//Statement stmt = con.createStatement();
			//String sql = "SELECT * FROM user_table ";
			pstmt.setString(1, id);
			pstmt.setString(2, pass);
			pstmt.setString(3, type);
			ResultSet rs = pstmt.executeQuery();

			while (rs.next()) {
				user e = new user();
				e.setId_Utable(rs.getInt("user_id"));
				e.setPassword(rs.getString("user_pass"));
				e.setUser_type(rs.getString("user_type"));
                           e.setNm_Utable(rs.getString("user_name"));
                
				allData.add(e);
			}

			pstmt.close();
			con.close();
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return allData;
	}
}

</div></details>

<details><summary><span style="color: red; ">InsertAction.java</span></summary><div>

package Model;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import Ent.user;
public class InsertAction {
	public List<user> Insert(String name, String pass, String type) {
	List<user> allData = new ArrayList<user>();

		try {
			Class.forName("com.mysql.cj.jdbc.Driver");
			Connection con = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/techdb",
					"seed", "Tech_123");
			String sql = "INSERT INTO user_table( user_name, user_pass,user_type) VALUES(?,?,?)";
			PreparedStatement pstmt = con.prepareStatement(sql);
			System.out.println(sql);
			pstmt.setString(1, name);
			pstmt.setString(2, pass);
			pstmt.setString(3, type);

			pstmt.executeUpdate();
			pstmt.close();
			con.close();
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return allData;
	}
}

</div></details>

<details><summary><span style="color: red; ">AnswerAction.java</span></summary><div>

package Model;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

import Ent.qestion;

public class AnswerAction {

	int count = 0;
	int idcount=0;

	public List<qestion> AllQuestion() {
		List<qestion> allData = new ArrayList<qestion>();
		try {
			Class.forName("com.mysql.cj.jdbc.Driver");
			Connection con = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/techdb",
					"seed", "Tech_123");

			Statement stmt = con.createStatement();
			String sql = "SELECT * FROM qestion_table";

			ResultSet rs = stmt.executeQuery(sql);

			while (rs.next()) {
				qestion q = new qestion();
				q.setId_Qtable(rs.getInt("q_id"));
				q.setq_Qtable(rs.getString("q_question"));
				q.settag_Qtable(rs.getString("q_tag"));
				q.setdone_Qtable(rs.getString("q_done"));
				q.setdetails_Qtable(rs.getString("q_details"));

				allData.add(q);
			}

			stmt.close();
			con.close();

		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}

		return allData;
	}

	public List<qestion> IntoDone(int id, String done) {
		List<qestion> allData = new ArrayList<qestion>();
		try {
			Class.forName("com.mysql.cj.jdbc.Driver");
			Connection con = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/techdb",
					"seed", "Tech_123");

			String sql = "UPDATE qestion_table SET q_done = ? WHERE q_id = ?";

			PreparedStatement pstmt = con.prepareStatement(sql);

			pstmt.setString(1, done);
			pstmt.setInt(2, id);

			pstmt.executeUpdate();

			pstmt.close();
			con.close();
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return allData;
	}

	public int CountDone() {
		try {
			Class.forName("com.mysql.cj.jdbc.Driver");
			Connection con = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/techdb",
					"seed", "Tech_123");

			Statement stmt = con.createStatement();
			//String sql = "SELECT q_id, COUNT(q_done) as count FROM qestion_table WHERE q_done='〇' GROUP BY q_id";
			String sql = "SELECT COUNT(q_ans='〇' AND q_done='〇' OR NULL) AS maru"
					+ ", COUNT(q_ans='×'  AND q_done='×' OR NULL) AS batu"
					+ "FROM qestion_table";
			ResultSet rs = stmt.executeQuery(sql);

			rs.next();
			rs.getInt(1);
			count = rs.getInt(1);
			stmt.close();
			con.close();

		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return count;
	}

	public int Countid() {
		//List<question> allData = new ArrayList<question>();
		try {
			Class.forName("com.mysql.cj.jdbc.Driver");
			Connection con = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/techdb",
					"seed", "Tech_123");

			Statement stmt = con.createStatement();

			String sql = "SELECT count(q_id) FROM qestion_table";

			ResultSet rs = stmt.executeQuery(sql);

			rs.next();
			idcount = rs.getInt(1);

			System.out.println(idcount);

			stmt.close();
			con.close();

		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return idcount;
	}

}

</div></details>

## WEB

| 動作環境 | ツール | 機能 |
| ---- | ---- | ---- |
| jsp　| eclipse | GUIの実装 |

### CSS

<details><summary><span style="color: red; ">Result.css</span></summary><div>

html {
  height:280%;
  background-image: linear-gradient(to right top, #CCCCFF 0%, #FFFFFF 100%);
}

.osare-table {
 width:100%;
 table-layout: fixed;
 border: none !important;
 border-collapse: separate;
 border-spacing: 7px 0px;
}

.osare-table th {
 border: none !important;
}

.osare-table tbody td {
   border: none !important;
  background-color:#FFF9FF !important;
  border-bottom: solid 2px #f9f9f9 !important;
}

.osare-table thead th {
 font-weight: bold;
 border-radius: 10px 10px 0px 0px;
}

.osare-table tfoot td {
 border-radius: 0 0 10px 10px;
}

.osare-table tbody th {
 background:#f2f5fc;
 font-weight: bold;
 border-bottom: solid 2px #f9f9f9 !important;
 line-height:4.5em;
}

.osare-table tfoot th {
 background:none;
 line-height:3em;
 font-weight: bold;
}

.osare-table tbody td {
 text-align:center;
}

.osare-table thead th:nth-child(1)  {
 background:#81d4fa;
}
.osare-table thead th:nth-child(2)  {
 background: #FFBCFF;
}
.osare-table thead th:nth-child(3)  {
 background: #FFFFB2;
}
.osare-table thead th:nth-child(4)  {
 background: #C4FF89;
}
.osare-table thead th:nth-child(5)  {
 background: #FFB2D8;
}

.osare-table tbody tr:last-child th,
.osare-table tbody tr:last-child td {
 border-bottom:none !important;
}

@media (max-width: 767px) {
  .osare-table thead th,
  .osare-table tbody th {
      padding:0;
  }
  .osare-table tfoot td {
  padding:0;
  font-size:0.9em;
  }
.osare-table tfoot td:nth-child(2) {
   font-size:1em;
  }

}

@media (max-width: 767px) {
 .col6t th,
 .col6t td{
 font-size:0.4em;
 padding: 10px 0px;
 }
 .col5t th,
 .col5t td{
 font-size:0.5em;
 padding: 10px 0px;
 }
 .col4t th,
 .col4t td{
 font-size:0.7em;
 padding: 10px 5px;
 }
 .col3t th,
 .col3t td{
 font-size:0.8em;
 padding: 10px 10px;
 }
}

/**/



*,
*:before,
*:after {
    box-sizing: inherit;
}

.nav {
    width: 550px;
    margin: 100px auto 0 auto;
    text-align: center;
}

/* Navigation */

.nav {
    font-family: Georgia, Arial, sans-serif;
    font-size: 14px;
}

.nav-items {
    padding: 0;
    list-style: none;
}

.nav-item {
    display: inline-block;
    margin-right: 25px;
}

.nav-item:last-child {
    margin-right: 0;
}

.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:active,
.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
    display: block;
    position: relative;
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
    text-decoration: none;
    outline: none;
}

.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:active {
    color: #fff;
    font-weight: bold;
}

.nav-link::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(0,0,0,0.2);
    opacity: 0;
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-link:hover::before,
.nav-link:hover::before {
    opacity: 1;
    -webkit-transform: translate(0, 5px);
    transform: translate(0, 5px);
}

.dropdown {
    position: relative;
}

.dropdown .nav-link {
    padding-right: 15px;
    height: 17px;
    line-height: 17px;
}

.dropdown .nav-link::after {
    content: "";
    position:absolute;
    top: 6px;
    right: 0;
    border: 5px solid transparent;
    border-top-color: #fff;
}

.submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 100;
    width: 200px;
    margin-left: -100px;
    background: #fff;
    border-radius: 3px;
    line-height: 1.46667;
    margin-top: -5px;
    box-shadow: 0 0 8px rgba(0,0,0,.3);
    opacity:0;
    -webkit-transform: translate(0, 0) scale(.85);
    transform: translate(0, 0)scale(.85);
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
    pointer-events: none;
}

.submenu::after,
.submenu::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -10px;
    border: 10px solid transparent;
    height: 0;
}

.submenu::after {
    border-bottom-color: #fff;
}

.submenu::before {
    margin-left: -13px;
    border: 13px solid transparent;
    border-bottom-color: rgba(0,0,0,.1);
    -webkit-filter:blur(1px);
    filter:blur(1px);
}

.submenu-items {
    list-style: none;
    padding: 10px 0;
}

.submenu-item {
    display: block;
    text-align: left;
}

.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
    color: #3498db;
    padding: 10px 20px;
}

.submenu-link:hover {
    text-decoration: underline;
}

.submenu-seperator {
    height: 0;
    margin: 12px 10px;
    border-top: 1px solid #eee;
}

.show-submenu .submenu {
    opacity: 1;
    -webkit-transform: translate(0, 25px) scale(1);
    transform: translate(0, 25px) scale(1);
    pointer-events: auto;
}

</div></details>

<details><summary><span style="color: red; ">login.css</span></summary><div>

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
    display: block;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

input:focus,
textarea:focus {
    outline: none;
}


h1 {
  position: relative;
  padding: 0.6em;
  background: #e0edff;
}

h1:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
  width: 0;
  height: 0;
}




p{
  text-align: center;
}


.btn-square-raised {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #668ad8;/*ボタン色*/
  color: #668ad8;/*ボタン色と同じに*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #627295;
  border-radius: 3px;/*角の丸み*/
  font-weight: bold;
  text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);
}

.btn-square-raised:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}


label,
select,
button,
input[type="submit"],
input[type="radio"],
input[type="checkbox"]
input[type="button"] {
    cursor: pointer;
}

a,
a:visited,
a:active {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

::selection {
    background: #ed327b;
    color: #fff;
}

::-moz-selection {
    background: #ed327b;
    color: #fff;
}

* {
    font-size:100%;
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* body {
  background:#7bb9c6;
} */

* {
  font-family:"Helvetica Neue", Helvetica, Arial;
}

h5 {
  text-align:center;
  margin-top:5px;
  color:rgba(0,0,0,.3);
}

h5 > a,a:visited {
  color:#fff;
  text-decoration:underline;
}

h5 > a:hover {
  text-decoration:none;
}

form {
  background:#fff;
  border-radius:6px;
  padding:20px;
  padding-top:30px;
  width:300px;
  margin:50px auto;
  box-shadow:15px 15px 0px rgba(0,0,0,.1);
}

h1 {
  text-align:center;
  font-size:1.4em;
  font-weight:700;
  color:#ccc;
  margin-bottom:24px;
}

span {
  font-weight:200;
}

input {
  width:100%;
  background:#f5f5f5;
  border:0;
  padding:20px;
  border-radius:6px;
  margin-bottom:10px;
  border:1px solid #eee;
}

.btn {
  position:relative;
  width:100%;
  padding:20px;
  border-radius:6px;
  border:0;
  background:#f26964;
  font-size:1.2em;
  color:#fff;
  text-shadow:1px 1px 0px rgba(0,0,0,.1);
  box-shadow:0px 3px 0px #c1524e;
}

.btn:active {
  top:3px;
  box-shadow:none;
}

h6 {
  text-align:center;
  padding:20px;
  padding-top:35px;
  color:#777;
  cursor:pointer;
}

.social {
  display:none;
}

.fb {
  margin-top:15px;
  background:#3b5998;
  box-shadow:0px 3px 0px #2c416e;
}

/* .tw {
  background:#00acee;
  box-shadow:0px 3px 0px #008dc3;
} */

.google {
  background:#db4a39;
  box-shadow:0px 3px 0px #b93f31;
}

</div></details>

<details><summary><span style="color: red; ">menu.css</span></summary><div>

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.menu {
	display: block;
	overflow: hidden;
	width: 60px;
	height: 60px;
	margin: 30px auto;
	cursor: pointer;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	border: 3px solid transparent;
	border-radius: 50%;
	background-color: #1b2538;
	background-color: #ffffff;
}

.menu div.menubar {
	width: 30px;
	margin: 17px auto;

}

.menu div.menubar .bar {
	display: block;
	width: 100%;
	height: 5px;
	margin-top: 3px;
	border-radius: 2px;
/* 	background-color: #ffffff; */
}

.menu ul {
	display: none;
	margin: 0;
	padding: 0;
	list-style-type: none;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	text-align: center;
	opacity: 0;
	background-color: #ffffff;
}

.menu ul li {
	display: inline-block;

}

.menu ul li a {
	display: inline-block;
	padding: 0.7em 0.5em;
	-webkit-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
	text-decoration: none;
	color: #1b2538;
	border-bottom: 4px solid transparent;
	height: 56px;
	line-height: 2em;

}

.menu ul li a:hover {
	color: #ffffff;
	background-color: #1b2538;
}

.menu ul li a:target {
	border-bottom-color: #1b2538;
}
/* クリックした時の動き */
#cp_navimenuid {
	display: none;
}

#cp_navimenuid:checked ~ .menu {
	width: 100%;
	height: 60px;
	border: 3px solid #1b2538;
	border-radius: 5px;
	background-color: transparent;
}

#cp_navimenuid:checked ~ .menu>ul {
	display: block;
	opacity: 1;
}

#cp_navimenuid:checked ~ .menu>.menubar {
	display: none;
}

/* .box {
	background-image:
		url("https://jp.freepik.com/premium-vector/student-reading-illustration_826080.htm#page=1&query=kid%20studying&position=38");
} */

</div></details>

<details><summary><span style="color: red; ">question.css</span></summary><div>

@charset "UTF-8";
 table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0px 10px;
  border-radius: 20px;
}

 table tr *:nth-child(1){
  background: #72c7cd;
   border-radius: 20px;
}

 table tr *:nth-child(2){
  background: #72c7cd;
  border-radius: 20px;
}

#exam2 table tr *:nth-child(1){
  background: rgb(255, 255, 128)550;
}

table tr *:nth-child(4){
  background: #6e87d7;
}

table th,table td{
  color:black;
  border:solid 1px white;
  text-align: center;
  padding: 10px 0;
}

</div></details>

<details><summary><span style="color: red; ">question2.css</span></summary><div>

@charset "UTF-8";
table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0px 10px;
  border-radius: 20px;
}

table tr *:nth-child(1){
  background: #72c7cd;
   border-radius: 20px;
}

table tr *:nth-child(2){
  background: #72c7cd;
  border-radius: 20px;
}

table tr *:nth-child(3){
  background: #649cdf;
}

table tr *:nth-child(4){
  background: #6e87d7;
}

table th,table td{
  color:black;
  border:solid 1px white;
  text-align: center;
  padding: 10px 0;
}

</div></details>

<details><summary><span style="color: red; ">botton.css</span></summary><div>

@charset "UTF-8";
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;/*rem算出をしやすくするために*/
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: absolute;top:0;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}
.btn--orange,
button.btn--orange {
  color: #fff;
  background-color: #e992bf;
  width:200px;
}
.btn--orange:hover,
button.btn--orange:hover {
  color: #fff;
  background: #e992bf;
  width:200px;
  margin: 0 auto;
}

button.btn--radius {
   border-radius: 100vh;
   width:200px;

}
.wrap {
	text-align:center;
}

</div></details>

<details><summary><span style="color: red; ">botton2.css</span></summary><div>

@charset "UTF-8";
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;/*rem算出をしやすくするために*/
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}
.btn--orange2,
btton.btn--orange2 {
  color: #fff;
  background-color: #6fb7ff;
   width:200px;
}
.btn--orange:hover,
botton.btn--orange2:hover {
  color: #fff;
  background: #6fb7ff;
   width:200px;
}

botton.btn--radius2 {
   border-radius: 100vh;
    width:200px;
}

</div></details>

### WebContent

<details><summary><span style="color: red; ">login.jsp</span></summary><div>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>child</title>

<link rel="stylesheet" href="css/login.css">
</head>
<body
	background="https://images.unsplash.com/photo-1516979187457-637abb4f9353?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80">
	<font color="red">${LOGIN_ERROR}</font>

	<h1>ログイン画面</h1>
	<p>ログイン情報を入力してください</p>
	<p>※typeは保護者の場合は1を,お子様であれば2を,管理者の場合は3を入力してください</p>

	<form class="box" action="LoginServlet" method="POST">
		<div style="text-align: center"></div>
		<table>
			<tr>
				<!-- <td>ID</td> -->
				<td><input placeholder="id" name="id" type="text"></td>
			</tr>
			<tr>
				<!-- <td>Pass</td> -->
				<td><input placeholder="password" name="pass" type="password"></td>
			</tr>

			<tr>
				<!-- <td>TYPE</td> -->
				<td><input placeholder="type" name="type" type="text"></td>


			</tr>

			<tr>
				<!-- <a href="#" class="btn-square-raised">BUTTON</a> -->
				<td><input href="#" class="btn-square-raised" type="submit"
					value="login"></td>
			</tr>
		</table>
	</form>
	<form class="box" action="insert.jsp" method="POST">
		<input href="#" class="btn-square-raised" type="submit" value="新規登録">
	</form>
</body>
</html>

</div></details>

<details><summary><span style="color: red; ">menu.jsp</span></summary><div>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page import="Ent.user" %>
<%
user emp = (user) session.getAttribute("LOGINUSER");
%>
<%
String name = emp.getNm_Utable();
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<title>子どもメニュー</title>

</head>
<body>
<body>
	<!-- <h1  align="center"  >ログイン完了</h1> -->

	<!-- <div style="margin-left: auto; float: right; width: 90%"> -->

	<div style="margin-left: auto; float: right; width: 100%">
		<font size="3">ログイン中</font>
		<table border="1">
			<tr>
				<td><font size="2">LOGIN USER</font></td>
				<td><font size="2"><%=name%></font></td>
			</tr>
		</table>
	</div>

	<h2 align="center">メニュー</h2>

	<form action="mondai.jsp" method="POST">
		<table>
			<tr>
				<td><input type="submit" value="問題を解く"></td>
			</tr>
		</table>
	</form>

	<form action="ResultServlet"method="POST">
		<table>
			<tr>
				<td><input type="submit" value="進捗確認"></td>
			</tr>
		</table>
	</form>
</body>
</html>
    

</div></details>

<details><summary><span style="color: red; ">Mmenu.jsp</span></summary><div>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>管理者メニュー</title>
<link rel="stylesheet" href="css/menu.css">
</head>
<body
	background="https://i.pinimg.com/originals/cd/87/2a/cd872aedc7b1e3ca56a41eed60dbc3d1.jpg">

	<div style="margin-left: auto; float: right; width: 100%">
		<font size="3">ログイン中</font>
		<table border="1">
			<tr>
				<td><font size="2">LOGIN USER</font></td>
				<td><font size="2">
						<%-- <%=name%> --%>
				</font></td>
			</tr>
		</table>
	</div>
	<input type="checkbox" id="cp_navimenuid">
	<label class="menu" for="cp_navimenuid">

		<div class="menubar">
			<span class="bar"></span> <span class="bar"></span> <span class="bar"></span>
		</div>

		<ul>
			<li><a id="home" href="/Homerun/QuestionServlet">問題管理</a></li>

			<li><a id="about" href="/Homerun/ResultServlet">ユーザー管理</a></li>

		</ul>
	</label>
</body>
</html>

</div></details>

<details><summary><span style="color: red; ">Pmenu.jsp</span></summary><div>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@page import="Ent.user" %>
<%
user emp = (user) session.getAttribute("LOGINUSER");
%>
<%
String name = emp.getNm_Utable();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>保護者メニュー</title>
<link rel="stylesheet" href="css/menu.css">
</head>
<body background=https://iemone.jp/iemone-cms/wp-content/uploads/2020/05/58296-14.jpg>


<div >
		<font size="3">ログイン中</font>
		<table border="1" >
			<tr>
				<td><font size="2">LOGIN USER</font></td>
				<td><font size="2"><%=name%></font></td>
			</tr>
		</table>
	
<input type="checkbox" id="cp_navimenuid">
	<label class="menu" for="cp_navimenuid">

		<div class="menubar">
			<span class="bar"></span> <span class="bar"></span> <span class="bar"></span>
		</div>

		<ul>
			

			<li><a id="home" href="/Homerun/QuestionServlet">問題登録</a></li>
			
			<li><a id="about" href="/Homerun/ResultServlet">進捗確認</a></li>
			


	</label>

</body>
</html>

</div></details>

<details><summary><span style="color: red; ">insert.jsp</span></summary><div>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="Ent.user" %>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新規登録</title>
</head>
<body>
<font  color="red" >${ERROR}</font>
 <form action="insertCheck" method="POST">
 <h2 align="center">新規登録</h2>

<table border="1" alogn="center">
<tr>
 <td>名前</td>
 <td><input type="text"  name="name"></td>
 </tr>
 <tr>
 <td>パスワード</td>
 <td><input type="password"  name="pass"></td>
 </tr>
 <tr>
 <td>ユーザータイプ</td>
 <td><input type="type"  name="type"></td>
 </tr>

			<tr>
				<td><input type="submit" value="作成" ></td>
			</tr>
</table>
</form>
</body>
</html>

</div></details>

<details><summary><span style="color: red; ">InsertResult.jsp</span></summary><div>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登録完了</title>
</head>
<body>
<h1 align="center" >登録完了！！</h1>

<form action="login.jsp" >
			<table>
				<tr>
					<td>
					<td><a href="login.jsp"><span>ログイン画面へ</span></a></td>
				</tr>
			</table>
		</form>
</body>
</html>

</div></details>

<details><summary><span style="color: red; ">mondai.jsp</span></summary><div>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="Ent.question"%>
<%@ page import="java.util.List"%>


<%
List<question> getAllQ = (List<question>) request.getAttribute("Question_LIST");
%>
<%--
<%
String num = request.getParameter("num");
%>
--%>
<%
String id = request.getParameter("id");
%>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>問題</title>

<link rel="stylesheet" href="css/botton.css">
<link rel="stylesheet" href="css/botton2.css">
<link rel="stylesheet" href="css/top.css">
<!-- <link rel="stylesheet" href="css/question.css"> -->
</head>
<body background="https://www.pixeden.com/media/k2/galleries/112/001-subtle-light-pattern-background-texture.jpg">
	<br>
	<font color="red"  face="arial" size="6"  >目指せ満点！！</font>
	<!-- <h2>目指せ満点！！</h2> -->
	<form action="AnswerCheckServlet" method="POST">
		<font color="red" face="arial" size="6">全${countid}問</font>

<div id='exam2'>
		<table>
			<!-- <div id='exam2'> -->
				<%--
			<tr>
				<td><b>問題 <input type="text" name="num" style="width:20px;"
					value=<%=getAllQ.get(i).getId_Qtable()%> readonly></b></td>
			</tr>
			--%>
				<tr>
					<td ><font size="10" color="black">問題ID</font> <input type="text"  name="id" style="width: 20px;"
						value=<%=getAllQ.get(0).getId_Qtable()%> readonly ></td>
				</tr>
				<tr>
					<td height="70"><font size="10"><%=getAllQ.get(0).getq_Qtable()%></font></td>
				</tr>
			<!-- </div> -->
		</table>
</div>
		<div class="wrap">
		<table>
			<tr>

				<td  ><button class="btn btn--orange btn--radius" type="submit" name="マル" value="〇"><font size="10" color="white">〇</font></button></td>
				<td ><button class="btn btn--orange2 btn--radius2" type="submit" name="バツ" value="×"><font size="10" color="white">×</font></button></td>
			</tr>
		</table>
		</div>
		<br>

	</form>

	<br>
	<div id='exam1'>
	<table>
		<tr>
			<td height="20"><a href="Result.jsp"><font size="2"> <span>解答を終了</span></font></a></td>
		</tr>
	</table>

	<table>
		<tr>

			<td height="20"><a href="menu.jsp"><font size="2"><span>メニュー画面へ</span></font></a></td>
		</tr>
	</table>

</div>


</body>
</html>

</div></details>

<details><summary><span style="color: red; ">mondai2.jsp</span></summary><div>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="Ent.question"%>
<%@ page import="java.util.List"%>

<%-- <%
int getcount = Integer.parseInt(request.getParameter("count"));
%> --%>

<%
List<question> getAllQ = (List<question>) request.getAttribute("Question_LIST");
%>

<%
String num = request.getParameter("num");
%>


<%
int id = Integer.parseInt(request.getParameter("id"));
%>

<%
id++;
%>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>問題</title>

</head>
<body>
	<font color="red">目指せ満点！！</font>
	<form action="AnswerCheckServlet2" method="POST">
		<font color="red">全${countid}問</font>
		<table>
			<%--
			<tr>
				<td><b>問題 <input type="text" name="num" style="width:20px;"
					value=<%= %><%=getAllQ.get(i).getId_Qtable()%> readonly></b></td>
			</tr>
			 --%>
			<tr>
				<td>問題ID <input type="text" name="id" style="width: 20px;"
					value=<%=id%> readonly></td>
			</tr>
			<tr>
				<td><%=getAllQ.get(id-1).getq_Qtable()%></td>
			</tr>
		</table>
		<table>
			<tr>
				<td><input type="submit" name="マル" value="〇"></td>
				<td><input type="submit" name="バツ" value="×"></td>
			</tr>
		</table>


	</form>
	<br>
	<a href="Result.jsp"><button>解答を終了</button></a>


	<table>
		<tr>
			<td>
			<td><a href="menu.jsp"><span>メニュー画面へ</span></a></td>
		</tr>
	</table>

</body>
</html>

</div></details>

<details><summary><span style="color: red; ">question.jsp</span></summary><div>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="Ent.question"%>
<%@ page import="java.util.List"%>


<%
List<question> getAllQ = (List<question>) request.getAttribute("Question_LIST");
%>
<%--
<%
String num = request.getParameter("num");
%>
--%>
<%
String id = request.getParameter("id");
%>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>問題</title>

<link rel="stylesheet" href="css/botton.css">
<link rel="stylesheet" href="css/botton2.css">
<link rel="stylesheet" href="css/top.css">
<!-- <link rel="stylesheet" href="css/question.css"> -->
</head>
<body background="https://www.pixeden.com/media/k2/galleries/112/001-subtle-light-pattern-background-texture.jpg">
	<br>
	<font color="red"  face="arial" size="6"  >目指せ満点！！</font>
	<!-- <h2>目指せ満点！！</h2> -->
	<form action="AnswerCheckServlet" method="POST">
		<font color="red" face="arial" size="6">全${countid}問</font>

<div id='exam2'>
		<table>
			<!-- <div id='exam2'> -->
				<%--
			<tr>
				<td><b>問題 <input type="text" name="num" style="width:20px;"
					value=<%=getAllQ.get(i).getId_Qtable()%> readonly></b></td>
			</tr>
			--%>
				<tr>
					<td ><font size="10" color="black">問題ID</font> <input type="text"  name="id" style="width: 20px;"
						value=<%=getAllQ.get(0).getId_Qtable()%> readonly ></td>
				</tr>
				<tr>
					<td height="70"><font size="10"><%=getAllQ.get(0).getq_Qtable()%></font></td>
				</tr>
			<!-- </div> -->
		</table>
</div>
		<div class="wrap">
		<table>
			<tr>

				<td  ><button class="btn btn--orange btn--radius" type="submit" name="マル" value="〇"><font size="10" color="white">〇</font></button></td>
				<td ><button class="btn btn--orange2 btn--radius2" type="submit" name="バツ" value="×"><font size="10" color="white">×</font></button></td>
			</tr>
		</table>
		</div>
		<br>

	</form>

	<br>
	<div id='exam1'>
	<table>
		<tr>
			<td height="20"><a href="Result.jsp"><font size="2"> <span>解答を終了</span></font></a></td>
		</tr>
	</table>

	<table>
		<tr>

			<td height="20"><a href="menu.jsp"><font size="2"><span>メニュー画面へ</span></font></a></td>
		</tr>
	</table>

</div>


</body>
</html>

</div></details>

<details><summary><span style="color: red; ">question2.jsp</span></summary><div>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="Ent.question"%>
<%@ page import="java.util.List"%>

<%-- <%
int getcount = Integer.parseInt(request.getParameter("count"));
%> --%>

<%
List<question> getAllQ = (List<question>) request.getAttribute("Question_LIST");
%>

<%
String num = request.getParameter("num");
%>


<%
int id = Integer.parseInt(request.getParameter("id"));
%>

<%
id++;
%>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>問題</title>
<!-- <link rel="stylesheet" href="css/question2.css"> -->
<link rel="stylesheet" href="css/botton.css">
<link rel="stylesheet" href="css/botton2.css">
</head>
<body background="https://www.pixeden.com/media/k2/galleries/112/001-subtle-light-pattern-background-texture.jpg">
<br>
	<font color="red" face="arial" size="6" >目指せ満点！！</font>
	<form action="AnswerCheckServlet2" method="POST">
		<font color="red" face="arial" size="6">全${countid}問</font>
		<table>
			<%--
			<tr>
				<td><b>問題 <input type="text" name="num" style="width:20px;"
					value=<%= %><%=getAllQ.get(i).getId_Qtable()%> readonly></b></td>
			</tr>
			 --%>
			<tr>
				<td><font size="10" color="black">問題ID</font> <input type="text" name="id" style="width: 20px;"
					value=<%=id%> readonly></td>
			</tr>
			<tr>
				<td height="70"><font size="10"><%=getAllQ.get(id-1).getq_Qtable()%></font></td>
			</tr>
		</table>
		<table>
			<tr>
				<td ><button class="btn btn--orange btn--radius" type="submit" name="マル" value="〇"><font size="10" color="white">〇</font></button></td>
				<td ><button  class="btn btn--orange2 btn--radius2" type="submit" name="バツ" value="×"><font size="10" color="white">×</font></button></td>
			</tr>
		</table>


	</form>

	<br>
	<table>
	<tr><td>
	<a href="Result.jsp"><span>解答を終了</span></a></td></tr>

</table>
	<table>
		<tr>
			<td><a href="menu.jsp"><span>メニュー画面へ</span></a></td>
		</tr>
	</table>

</body>
</html>

</div></details>

<details><summary><span style="color: red; ">Result.jsp</span></summary><div>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="Ent.qestion"%>
<%@ page import="java.util.List"%>

<%
List<qestion> getAllQ = (List<qestion>) request.getAttribute("qestion_LIST");
%>



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>完了</title>
<link rel="stylesheet" href="CSS/Result.css">
<script type="text/javascript" src="Result.js"></script>


</head>
<body>
	<table class="osare-table col5t">



		<thead>
			<tr>
				<th></th>

				<th>問題内容</th>
				<th>回答</th>
				<th>答え</th>
			</tr>
			<%
			for (int i = 0; i < getAllQ.size(); i++) {
			%>

		</thead>
		<tbody>
			<tr>
				<th>問題<%=getAllQ.get(i).getId_Qtable()%></th>
				<td><%=getAllQ.get(i).getq_Qtable()%></td>
				<td><%=getAllQ.get(i).getdone_Qtable()%></td>
				<td><font color="red"><%=getAllQ.get(i).getans_Qtable()%></font></td>
			</tr>
			<tr>
			</tr>

			<%
			}
			%>

	</table>
<br>
<br>
<br>
	<center>
	<h1>正解数は${countId}問中${countDone}問です！</h1>
	</center>

	<canvas id="myPieChart"></canvas>
	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
	<script>
		var ctx = document.getElementById("myPieChart");
		var myPieChart = new Chart(ctx, {
			type : 'pie',
			data : {
				labels : [ "正解", "不正解" ],
				datasets : [ {
					backgroundColor : [ "#FF99CC", "#FAFF67" ],
					data : [ ${countDone}, ${countId}]
				} ]
			},
			options : {
				title : {
					display : true,
					text : '総合'
				}
			}
		});
	</script>

	<p>
		コメント：<br>
		<center>
		<textarea name="comment" rows="10" cols="180"></textarea>
		</center>
	</p>

	<table>
		<tr>
			<td>
			<td><a href="menu.jsp"><span>メニュー画面へ</span></a></td>
		</tr>
	</table>

	<nav role="navigation" class="nav">
    <ul class="nav-items">
        <li class="nav-item">
            <a href="#" class="nav-link"><span>メニュー</span></a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link"><span>問題一覧</span></a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link"><span>リザルト確認</span></a>
        </li>
        <li class="nav-item dropdown">
            <a href="#" class="nav-link"><span>/etc</span></a>
            <nav class="submenu">
                <ul class="submenu-items">
                    <li class="submenu-item"><a href="#" class="submenu-link">hoge</a></li>
                </ul>
            </nav>
        </li>
    </ul>
</nav>

</body>
</html>

</div></details>

### JS

<details><summary><span style="color: red; ">Result.js</span></summary><div>

[].slice.call(document.querySelectorAll('.dropdown .nav-link')).forEach(function(el){
    el.addEventListener('click', onClick, false);
});

function onClick(e){
    e.preventDefault();
    var el = this.parentNode;
    el.classList.contains('show-submenu') ? hideSubMenu(el) : showSubMenu(el);
}

function showSubMenu(el){
    el.classList.add('show-submenu');
    document.addEventListener('click', function onDocClick(e){
        e.preventDefault();
        if(el.contains(e.target)){
            return;
        }
        document.removeEventListener('click', onDocClick);
        hideSubMenu(el);
    });
}

function hideSubMenu(el){
    el.classList.remove('show-submenu');
}

</div></details>