Added result counters to the bottom of the page

Signed-off-by: Paul Wolneykien <[email protected]>
karanveerm · Apr 21, 2022 · 24de35b · 24de35b
1 parent 724943b
commit 24de35b
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 54 deletions.
diff --git a/po/quizgen.pot b/po/quizgen.pot
@@ -17,31 +17,39 @@ msgstr ""
 "Content-Type: text/plain; charset=CHARSET\n"
 "Content-Transfer-Encoding: 8bit\n"
 
-#: quizgen.py:234
+#: quizgen.py:244
 msgid "Correct! "
 msgstr ""
 
-#: quizgen.py:238
+#: quizgen.py:248
 msgid "Incorrect. "
 msgstr ""
 
-#: quizgen.py:294
+#: quizgen.py:306
 msgid "This option is correct. "
 msgstr ""
 
-#: quizgen.py:297
+#: quizgen.py:309
 msgid "This option is incorrect. "
 msgstr ""
 
-#: quizgen.py:327 quizgen.py:419
+#: quizgen.py:340 quizgen.py:437
 msgid "Submit"
 msgstr ""
 
-#: quizgen.py:420
+#: quizgen.py:438
 msgid "Hide"
 msgstr ""
 
-#: quizgen.py:508
+#: quizgen.py:560
+#, python-format
+msgid ""
+"<span class=\"heading\">Your results:</span> <span class=\"right_counter"
+"\"><span class=\"value\">%d</span></span> right answer(s) and <span class="
+"\"wrong_counter\"><span class=\"value\">%d</span></span> mistake(s)!"
+msgstr ""
+
+#: quizgen.py:563
 #, python-format
 msgid "Page generated using %s"
 msgstr ""
diff --git a/po/ru.po b/po/ru.po
@@ -9,39 +9,47 @@ msgstr ""
 "Project-Id-Version: Quizgen 0.1.0\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: 2022-04-20 17:57+0300\n"
-"PO-Revision-Date: 2022-04-20 18:11+0300\n"
+"PO-Revision-Date: 2022-04-21 22:06+0300\n"
 "Last-Translator: Paul Wolneykien <[email protected]>\n"
 "Language-Team: Russian <[email protected]>\n"
 "Language: ru\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 
-#: quizgen.py:234
+#: quizgen.py:244
 msgid "Correct! "
 msgstr "Верно! "
 
-#: quizgen.py:238
+#: quizgen.py:248
 msgid "Incorrect. "
 msgstr "Неверно! "
 
-#: quizgen.py:294
+#: quizgen.py:306
 msgid "This option is correct. "
 msgstr "Это правильный ответ. "
 
-#: quizgen.py:297
+#: quizgen.py:309
 msgid "This option is incorrect. "
 msgstr "Это неверный ответ. "
 
-#: quizgen.py:327 quizgen.py:419
+#: quizgen.py:340 quizgen.py:437
 msgid "Submit"
 msgstr "Проверить"
 
-#: quizgen.py:420
+#: quizgen.py:438
 msgid "Hide"
 msgstr "Скрыть"
 
-#: quizgen.py:508
+#: quizgen.py:560
+#, python-format
+msgid ""
+"<span class=\"heading\">Your results:</span> <span class=\"right_counter"
+"\"><span class=\"value\">%d</span></span> right answer(s) and <span class="
+"\"wrong_counter\"><span class=\"value\">%d</span></span> mistake(s)!"
+msgstr "<span class=\"heading\">Ваши результаты:</span> верных ответов — <span class=\"right_counter\"><span class=\"value\">%d</span></span>, ошибок — <span class=\"wrong_counter\"><span class=\"value\">%d</span></span>!"
+
+#: quizgen.py:563
 #, python-format
 msgid "Page generated using %s"
 msgstr "Страница создана с использованием %s"
diff --git a/quiz.css b/quiz.css
@@ -136,14 +136,16 @@ button:focus {
     outline: none;
 }
 
-#results {
+#floating_results {
   position: fixed;
   bottom: 0px;
   right: 0px;
   margin: 1em;
 }
 
-#right_counter, #wrong_counter, #results > .delimiter {
+#floating_results .right_counter,
+#floating_results .wrong_counter,
+#floating_results .delimiter {
   display: inline-block;
   font-size: 150%;
   font-weight: bold;
@@ -152,28 +154,47 @@ button:focus {
   vertical-align: middle;
 }
 
-#right_counter, #wrong_counter {
+#floating_results .right_counter,
+#floating_results .wrong_counter {
   border-radius: 50%;
   color: white;
   padding: 0.3em 0.6em;
   transition: padding 0.5s;
 }
 
-#right_counter {
+#floating_results .right_counter {
   background-color: green;
 }
 
-#results > .delimiter {
+#floating_results .delimiter {
   background-color: transparent;
   padding: 0px 0px;
   margin: 0px 0px;
 }
 
-#wrong_counter {
+#floating_results .wrong_counter {
   background-color: red;
 }
 
-#right_counter.rise, #wrong_counter.rise {
+#floating_results .right_counter.rise,
+#floating_results .wrong_counter.rise {
   padding: 0.5em 0.9em;
   transition: padding 0.5s;
+}
+
+#footer_results {
+  margin: 1em 1em 3em 1em;
+  text-align: center;
+  font-size: 150%;
+}
+
+#footer_results .heading {
+  font-style: italic;
+  text-decoration: underline;
+}
+
+#footer_results .right_counter,
+#footer_results .wrong_counter {
+  font-style: italic;
+  font-weight: bold;
 }
diff --git a/quizgen.py b/quizgen.py
@@ -556,14 +556,18 @@ def get_footer():
   try: 
      footer_file = open('footer.html')
   except IOError:
-     footer = _('Page generated using %s') % '<a href=\"https://github.com/karanveerm/quizgen\">Quizgen</a>'
-     footer = footer + """
-  <div id="results">
-    <div id="right_counter">
+     footer = """<div id="footer_results">"""
+     footer += _('<span class="heading">Your results:</span> <span class="right_counter"><span class="value">%d</span></span> right answer(s) and <span class="wrong_counter"><span class="value">%d</span></span> mistake(s)!') % (0, 0)
+     footer += """
+  </div>"""
+     footer += _('Page generated using %s') % '<a href=\"https://github.com/karanveerm/quizgen\">Quizgen</a>'
+     footer += """
+  <div id="floating_results" class="results">
+    <div class="right_counter">
       <span class="value">0</span>
     </div>
     <span class="delimiter">/</span>
-    <div id="wrong_counter">
+    <div class="wrong_counter">
       <span class="value">0</span>
     </div>
   </div>"""
@@ -690,22 +694,22 @@ def main():
           }
         };
 
-        $('#right_counter').children('.value').each(function () {
+        $('.right_counter .value').each(function () {
           this.innerText = right;
         });
-        $('#wrong_counter').children('.value').each(function () {
+        $('.wrong_counter .value').each(function () {
           this.innerText = wrong;
         });
 
         if (right > wrong) {
-          $('#wrong_counter').toggleClass('rise', false);
-          $('#right_counter').toggleClass('rise', true);
+          $('.wrong_counter').toggleClass('rise', false);
+          $('.right_counter').toggleClass('rise', true);
         } else if (wrong > right) {
-          $('#right_counter').toggleClass('rise', false);
-          $('#wrong_counter').toggleClass('rise', true);
+          $('.right_counter').toggleClass('rise', false);
+          $('.wrong_counter').toggleClass('rise', true);
         } else {
-          $('#right_counter').toggleClass('rise', false);
-          $('#wrong_counter').toggleClass('rise', false);
+          $('.right_counter').toggleClass('rise', false);
+          $('.wrong_counter').toggleClass('rise', false);
         }
       }
     </script>
@@ -914,14 +918,16 @@ def main():
     outline: none;
 }
 
-#results {
+#floating_results {
   position: fixed;
   bottom: 0px;
   right: 0px;
   margin: 1em;
 }
 
-#right_counter, #wrong_counter, #results > .delimiter {
+#floating_results .right_counter,
+#floating_results .wrong_counter,
+#floating_results .delimiter {
   display: inline-block;
   font-size: 150%;
   font-weight: bold;
@@ -930,31 +936,50 @@ def main():
   vertical-align: middle;
 }
 
-#right_counter, #wrong_counter {
+#floating_results .right_counter,
+#floating_results .wrong_counter {
   border-radius: 50%;
   color: white;
   padding: 0.3em 0.6em;
   transition: padding 0.5s;
 }
 
-#right_counter {
+#floating_results .right_counter {
   background-color: green;
 }
 
-#results > .delimiter {
+#floating_results .delimiter {
   background-color: transparent;
   padding: 0px 0px;
   margin: 0px 0px;
 }
 
-#wrong_counter {
+#floating_results .wrong_counter {
   background-color: red;
 }
 
-#right_counter.rise, #wrong_counter.rise {
+#floating_results .right_counter.rise,
+#floating_results .wrong_counter.rise {
   padding: 0.5em 0.9em;
   transition: padding 0.5s;
 }
+
+#footer_results {
+  margin: 1em 1em 3em 1em;
+  text-align: center;
+  font-size: 150%;
+}
+
+#footer_results .heading {
+  font-style: italic;
+  text-decoration: underline;
+}
+
+#footer_results .right_counter,
+#footer_results .wrong_counter {
+  font-style: italic;
+  font-weight: bold;
+}
 """
 
 

diff --git a/sample.html b/sample.html
@@ -42,22 +42,22 @@
           }
         };
 
-        $('#right_counter').children('.value').each(function () {
+        $('.right_counter .value').each(function () {
           this.innerText = right;
         });
-        $('#wrong_counter').children('.value').each(function () {
+        $('.wrong_counter .value').each(function () {
           this.innerText = wrong;
         });
 
         if (right > wrong) {
-          $('#wrong_counter').toggleClass('rise', false);
-          $('#right_counter').toggleClass('rise', true);
+          $('.wrong_counter').toggleClass('rise', false);
+          $('.right_counter').toggleClass('rise', true);
         } else if (wrong > right) {
-          $('#right_counter').toggleClass('rise', false);
-          $('#wrong_counter').toggleClass('rise', true);
+          $('.right_counter').toggleClass('rise', false);
+          $('.wrong_counter').toggleClass('rise', true);
         } else {
-          $('#right_counter').toggleClass('rise', false);
-          $('#wrong_counter').toggleClass('rise', false);
+          $('.right_counter').toggleClass('rise', false);
+          $('.wrong_counter').toggleClass('rise', false);
         }
       }
     </script>
@@ -282,13 +282,14 @@ <h1>Sample Quiz Title</h1>
 </div>
 
   <footer>
-  Страница создана с использованием <a href="https://github.com/karanveerm/quizgen">Quizgen</a>
-  <div id="results">
-    <div id="right_counter">
+  <div id="footer_results"><span class="heading">Your results:</span> <span class="right_counter"><span class="value">0</span></span> right answer(s) and <span class="wrong_counter"><span class="value">0</span></span> mistake(s)!
+  </div>Страница создана с использованием <a href="https://github.com/karanveerm/quizgen">Quizgen</a>
+  <div id="floating_results" class="results">
+    <div class="right_counter">
       <span class="value">0</span>
     </div>
     <span class="delimiter">/</span>
-    <div id="wrong_counter">
+    <div class="wrong_counter">
       <span class="value">0</span>
     </div>
   </div>