Multi-language support in quiz

SkyEye-FAST · Jul 15, 2024 · 14b1460 · 14b1460
1 parent bcdf0ee
commit 14b1460
Show file tree

Hide file tree

Showing 11 changed files with 148 additions and 74 deletions.
diff --git a/app.py b/app.py
@@ -166,7 +166,7 @@ def index() -> str:
     return render_template("index.html", **context)
 
 
-def validate_language_code(lang_code:str) -> bool:
+def validate_language_code(lang_code: str) -> bool:
     """
     判断语言代码是否有效的函数，有效则返回True，否则返回False。
 
@@ -347,7 +347,6 @@ def quiz_portal() -> str:
     Returns:
         str: 渲染后的测验门户页面 HTML。
     """
-
     p1 = _l("Enter question group code...")
 
     return render_template(
@@ -367,7 +366,7 @@ def quiz_redirect():
     return redirect(url_for("quiz_portal"))
 
 
-@flask_app.route("/quiz/<code>")
+@flask_app.route("/quiz/<code>", methods=["GET"])
 def quiz_sub(code: str) -> str:
     """
     测验子页面路由。
@@ -379,6 +378,10 @@ def quiz_sub(code: str) -> str:
         str: 渲染后的测验子页面页面 HTML。
     """
 
+    lang = request.args.get("l", "zh_cn")
+    if not validate_language_code(lang):
+        lang = "zh_cn"
+
     if len(code) != 3 * QUESTION_AMOUNT:
         return render_template("quiz_error.html")
 
@@ -388,14 +391,15 @@ def quiz_sub(code: str) -> str:
 
     keys = [id_map[seg] for seg in code_list]
     questions = {
-        key: {"source": data["en_us"][key], "translation": data["zh_cn"][key]}
+        key: {"source": data["en_us"][key], "translation": data[lang][key]}
         for key in keys
     }
 
     p2 = _l("Enter translation here...")
 
     return render_template(
         "quiz_sub.html",
+        lang=lang.replace("_", "-"),
         questions=questions,
         placeholder=p2,
         random_code=get_questions(),

diff --git a/messages.pot b/messages.pot
@@ -7,34 +7,34 @@
 #, fuzzy
 msgid ""
 msgstr ""
-"Project-Id-Version: Demo\n"
-"Report-Msgid-Bugs-To: [email protected]\n"
-"POT-Creation-Date: 2024-07-14 01:54+0800\n"
+"Project-Id-Version: PROJECT VERSION\n"
+"Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
+"POT-Creation-Date: 2024-07-15 15:39+0800\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
-"Last-Translator: SkyEye_FAST <[email protected]>\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[email protected]>\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Generated-By: Babel 2.15.0\n"
 
-#: app.py:82
+#: app.py:106
 msgid "Content to be queried: "
 msgstr ""
 
-#: app.py:83
+#: app.py:107
 msgid "Enable additional languages"
 msgstr ""
 
-#: app.py:84
+#: app.py:108
 msgid "QUERY"
 msgstr ""
 
-#: app.py:192
+#: app.py:351
 msgid "Enter question group code..."
 msgstr ""
 
-#: app.py:222
+#: app.py:395
 msgid "Enter translation here..."
 msgstr ""
 
@@ -91,15 +91,19 @@ msgstr ""
 msgid "Random questions (refresh to reselect)"
 msgstr ""
 
-#: templates/quiz_portal.html:36
+#: templates/quiz_portal.html:35
+msgid "Language: "
+msgstr ""
+
+#: templates/quiz_portal.html:45
 msgid "Enter"
 msgstr ""
 
-#: templates/quiz_portal.html:40
+#: templates/quiz_portal.html:49
 msgid "Query Page"
 msgstr ""
 
-#: templates/quiz_portal.html:43
+#: templates/quiz_portal.html:52
 msgid "Table Page"
 msgstr ""
 

diff --git a/static/css/index.css b/static/css/index.css
@@ -237,6 +237,7 @@ table th {
     padding: 0.2em;
     border: 1px solid #ccc;
     border-radius: 5px;
+    margin-left: 3px;
 }
 
 .form .submit {

diff --git a/static/css/quiz_portal.css b/static/css/quiz_portal.css
@@ -25,6 +25,11 @@ a {
     font-size: x-large;
 }
 
+label {
+    font-size: x-large;
+    text-align: right;
+}
+
 .github-icon {
     width: 1.75ex;
     height: inherit;
@@ -51,6 +56,19 @@ a {
     width: 100%;
 }
 
+.select-container {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    padding-bottom: 20px;
+    width: 100%;
+}
+
+select {
+    margin-left: 5px;
+}
+
+select,
 input[type="text"] {
     font-family: "Fira Code", "Source Code Pro", Consolas, Monaco, monospace;
     flex: 1;
@@ -105,7 +123,7 @@ button {
 /* 响应式设计 */
 @media (orientation: portrait) and (max-width: 760px) {
     a {
-        font-size: larger;
+        font-size: initial;
     }
 
     .container-1 {
@@ -119,17 +137,16 @@ button {
 
     .btn-1,
     .btn-2,
-    input[type="text"] {
+    label,
+    select,
+    .container-1 input[type="text"] {
         font-size: 14px;
         padding: 7px;
     }
 
     .btn-1,
+    .select-container,
     .input-container {
         width: 90%;
     }
-
-    .links {
-        font-size: smaller;
-    }
 }
diff --git a/static/css/quiz_sub.css b/static/css/quiz_sub.css
@@ -1,4 +1,4 @@
-@import url("https://fonts.font.im/css2?family=Fira+Code&family=Noto+Serif:[email protected]&family=Noto+Serif+SC:wght@400;700;900&display=swap");
+@import url("https://fonts.font.im/css2?family=Noto+Serif:[email protected]&family=Noto+Serif+KR:wght@400;700&family=Noto+Serif+HK:wght@400;700&family=Noto+Serif+SC:wght@400;700&family=Noto+Serif+TC:wght@400;700&display=swap");
 
 body {
     background-color: #f9f2e0;
@@ -100,7 +100,22 @@ input[type="text"] {
         "思源宋体", "Times New Roman", SimSun, Times, serif;
 }
 
-.zh-cn.title {
+.zh-hk {
+    font-family: "Noto Serif HK", "Source Han Serif HC", "Source Han Serif HK",
+        "思源宋體 香港", "Times New Roman", SimSun, Times, serif;
+}
+
+.zh-tw {
+    font-family: "Noto Serif TC", "Source Han Serif TC", "Source Han Serif TW",
+        "思源宋體", "Times New Roman", SimSun, Times, serif;
+}
+
+.lzh {
+    font-family: "Noto Serif KR", "Source Han Serif K", "Source Han Serif KR",
+        "Times New Roman", Times, serif;
+}
+
+#title {
     font-size: 3em;
     font-weight: 900;
 }

diff --git a/templates/quiz_portal.html b/templates/quiz_portal.html
@@ -28,12 +28,21 @@
     </div>
     <div class="container-1">
         <div class="title" lang="{{ locale }}">{{ _("Minecraft Standard Translation Quiz") }}</div>
-        <button class="btn-1" onclick="window.location.href='quiz/{{ random_code }}'">
+        <button class="btn-1" id="randomQuizButton">
             {{ _("Random questions (refresh to reselect)") }}
         </button>
+        <div class="select-container">
+            <label for="query-lang">{{ _("Language: ") }}</label>
+            <select name="query-lang" id="query-lang">
+                <option value="zh_cn" lang="zh-Hans-CN">简体中文 (中国大陆)</option>
+                <option value="zh_hk" lang="zh-Hant-HK">繁體中文 (香港特別行政區)</option>
+                <option value="zh_tw" lang="zh-Hant-TW">繁體中文 (台灣)</option>
+                <option value="lzh" lang="lzh">文言 (華夏)</option>
+            </select>
+        </div>
         <div class="input-container">
             <input type="text" id="inputText" placeholder="{{ placeholder }}" autocomplete="off">
-            <button class="btn-2" onclick="redirectToInput()">{{ _("Enter") }}</button>
+            <button class="btn-2" id="enterButton">{{ _("Enter") }}</button>
         </div>
         <div class="links">
             <a id="query-link" href="../"><span class="material-symbols-outlined b">manage_search</span>
@@ -51,11 +60,27 @@
     </div>
 
     <script>
-        function redirectToInput() {
-            var inputContent = document.getElementById('inputText').value;
-            var redirectTo = 'quiz/' + inputContent;
-            window.location.href = redirectTo;
-        }
+        $(document).ready(() => {
+            $("#randomQuizButton").click(() => {
+                const randomCode = "{{ random_code }}";
+                const selectedLang = $("#query-lang").val();
+                const redirectTo = `quiz/${randomCode}?l=${selectedLang}`;
+                window.location.href = redirectTo;
+            });
+
+            $("#query-lang").change(() => {
+                const selectedValue = $(this).val();
+                const currentUrl = window.location.href.split("?")[0];
+                const redirectTo = `${currentUrl}?l=${selectedValue}`;
+                window.location.href = redirectTo;
+            });
+
+            $("#enterButton").click(() => {
+                const inputContent = $("#inputText").val();
+                const redirectTo = `quiz/${inputContent}`;
+                window.location.href = redirectTo;
+            });
+        });
     </script>
 </body>
 

diff --git a/templates/quiz_sub.html b/templates/quiz_sub.html
@@ -37,11 +37,11 @@
                 <div id="sourceText" class="source"></div>
                 <div id="keyText" class="key"></div>
             </div>
-            <div id="boxes" class="zh-cn"></div>
+            <div id="boxes" class="{{ lang }}"></div>
         </div>
-        <input type="text" id="inputBox" class="zh_cn" placeholder="{{ placeholder }}" autocomplete="off">
+        <input type="text" id="inputBox" class="{{ lang }}" placeholder="{{ placeholder }}" autocomplete="off">
         <div class="summary" id="summary">
-            <div class="zh-cn title">{{ _("All questions completed!") }}</div>
+            <div id="title" class="{{ lang }}">{{ _("All questions completed!") }}</div>
             <table id="summaryTable">
                 <thead>
                     <tr>

diff --git a/translations/zh_Hans_CN/LC_MESSAGES/messages.mo b/translations/zh_Hans_CN/LC_MESSAGES/messages.mo