Hugging Face's logo

Spaces:
OzoneAsai
/
molQuiz
Sleeping

App Files Community
OzoneAsai commited on
Commit
8b41da9
•
1 Parent(s): ef4b2f1

Upload 3 files

Browse files
Files changed (3) hide show
  1. outerElectronFl.py +57 -0
  2. templates/quiz.html +80 -0
  3. templates/styles.css +53 -0
outerElectronFl.py ADDED
@@ -0,0 +1,57 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ from flask import Flask, render_template, request, session, redirect, url_for
2
+ import random
3
+
4
+ app = Flask(__name__)
5
+ app.secret_key = "your_secret_key_here"
6
+
7
+ # 元素と最外殻電子の数の辞書
8
+ element_outer_electrons: dict[str, int] = {
9
+ "水素": 1,
10
+ "ヘリウム": 2,
11
+ "リチウム": 1,
12
+ "ベリリウム": 2,
13
+ "ホウ素": 3,
14
+ "炭素": 4,
15
+ "窒素": 5,
16
+ "酸素": 6,
17
+ "フッ素": 7,
18
+ "アルゴン": 8,
19
+ "クリプトン": 8,
20
+ "キセノン": 8,
21
+ "ナトリウム": 1,
22
+ "マグネシウム": 2,
23
+ "アルミニウム": 3,
24
+ "ケイ素": 4,
25
+ "リン": 5,
26
+ "硫黄": 6,
27
+ "塩素": 7,
28
+ "カリウム": 1,
29
+ "カルシウム": 2,
30
+ # 他の元素も追加可能
31
+ }
32
+
33
+ @app.route("/", methods=["GET", "POST"])
34
+ def quiz():
35
+ # セッションに元素がない場合はランダムに選択
36
+ if "element" not in session:
37
+ session["element"] = random.choice(list(element_outer_electrons.keys()))
38
+
39
+ if request.method == "POST":
40
+ user_input = int(request.form["user_input"])
41
+ correct_answer = element_outer_electrons[session["element"]]
42
+ if user_input == correct_answer:
43
+ result = "正解です！"
44
+ else:
45
+ result = f"残念！正解は {correct_answer} でした。"
46
+ return render_template("quiz.html", element=session["element"], result=result)
47
+
48
+ return render_template("quiz.html", element=session["element"], result=None)
49
+
50
+ @app.route("/next", methods=["POST"])
51
+ def next_question():
52
+ # 次の問題をセッションに設定し、リダイレクト
53
+ session["element"] = random.choice(list(element_outer_electrons.keys()))
54
+ return redirect(url_for("quiz"))
55
+
56
+ if __name__ == "__main__":
57
+ app.run(debug=True)
templates/quiz.html ADDED
@@ -0,0 +1,80 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ja">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>元素の最外殻電子数クイズ</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ background-color: #f0f0f0;
11
+ margin: 0;
12
+ padding: 0;
13
+ }
14
+
15
+ .container {
16
+ max-width: 600px;
17
+ margin: 50px auto;
18
+ background-color: #fff;
19
+ padding: 20px;
20
+ border-radius: 8px;
21
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
22
+ }
23
+
24
+ h1 {
25
+ text-align: center;
26
+ color: #333;
27
+ }
28
+
29
+ p {
30
+ margin-bottom: 20px;
31
+ }
32
+
33
+ label {
34
+ display: block;
35
+ margin-bottom: 10px;
36
+ }
37
+
38
+ input[type="number"] {
39
+ width: 100%;
40
+ padding: 10px;
41
+ margin-bottom: 20px;
42
+ border: 1px solid #ccc;
43
+ border-radius: 5px;
44
+ }
45
+
46
+ .btn {
47
+ display: block;
48
+ width: 100%;
49
+ padding: 10px;
50
+ background-color: #007bff;
51
+ color: #fff;
52
+ border: none;
53
+ border-radius: 5px;
54
+ cursor: pointer;
55
+ transition: background-color 0.3s ease;
56
+ }
57
+
58
+ .btn:hover {
59
+ background-color: #0056b3;
60
+ }
61
+ </style>
62
+ </head>
63
+ <body>
64
+ <div class="container">
65
+ <h1>元素の最外殻電子数クイズ</h1>
66
+ <p>次の元素の最外殻電子数は何でしょう？: <strong>{{ element }}</strong></p>
67
+ <form action="/" method="post">
68
+ <label for="user_input">最外殻電子数を入力してください:</label>
69
+ <input type="number" id="user_input" name="user_input" min="1" required>
70
+ <button type="submit" class="btn">答え合わせ</button>
71
+ </form>
72
+ {% if result %}
73
+ <p>{{ result }}</p>
74
+ {% endif %}
75
+ <form action="/next" method="post">
76
+ <button type="submit" class="btn">次の問題</button>
77
+ </form>
78
+ </div>
79
+ </body>
80
+ </html>
templates/styles.css ADDED
@@ -0,0 +1,53 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ font-family: Arial, sans-serif;
3
+ background-color: #f0f0f0;
4
+ margin: 0;
5
+ padding: 0;
6
+ }
7
+
8
+ .container {
9
+ max-width: 600px;
10
+ margin: 50px auto;
11
+ background-color: #fff;
12
+ padding: 20px;
13
+ border-radius: 8px;
14
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
15
+ }
16
+
17
+ h1 {
18
+ text-align: center;
19
+ color: #333;
20
+ }
21
+
22
+ p {
23
+ margin-bottom: 20px;
24
+ }
25
+
26
+ label {
27
+ display: block;
28
+ margin-bottom: 10px;
29
+ }
30
+
31
+ input[type="number"] {
32
+ width: 100%;
33
+ padding: 10px;
34
+ margin-bottom: 20px;
35
+ border: 1px solid #ccc;
36
+ border-radius: 5px;
37
+ }
38
+
39
+ .btn {
40
+ display: block;
41
+ width: 100%;
42
+ padding: 10px;
43
+ background-color: #007bff;
44
+ color: #fff;
45
+ border: none;
46
+ border-radius: 5px;
47
+ cursor: pointer;
48
+ transition: background-color 0.3s ease;
49
+ }
50
+
51
+ .btn:hover {
52
+ background-color: #0056b3;
53
+ }