Update app.py

app.py

@@ -38,7 +38,7 @@ IMAGE_FOLDER = './images'
 CSV_FILE = './select.csv'
 BASE_LOCATION = [0, 23]
 RULES = """<h1>OSV-5M (plonk)</h1>
-<center style="margin-bottom: 0.5em; margin-top: 0.5em"><img width="256" alt="Rotating globe" src="https://upload.wikimedia.org/wikipedia/commons/6/6b/Rotating_globe.gif"></center>
+<center style="margin-bottom: 1em; margin-top: 1em"><img width="256" alt="Rotating globe" src="https://upload.wikimedia.org/wikipedia/commons/6/6b/Rotating_globe.gif"></center>
 <h2> Instructions </h2>
 <h3> Click on the map 🗺️ (left) to the location at which you think the image 🖼️ (right) was captured!</h3>
 <h3 style="margin-bottom: 0.5em"> Click "Select" to finalize your selection and then "Next" to move to the next image.</h3>
@@ -49,8 +49,7 @@ RULES = """<h1>OSV-5M (plonk)</h1>
 <h3 style="margin-bottom: 0.5em"> Like you, the AIs will need to pick up on geographic clues to pinpoint the locations of the images.</h3>
 
 <h2> Geoscore </h2>
-<h3> The geoscore is calculated based on how close each guess is to the true location as in Geoguessr, with a maximum of <b>5000 points</b>. </h3>
-<h3> We use the formula $g(d) = 5000 \\exp(\\frac{-d}{1492.7})$ </h3>
+<h3> The geoscore is calculated based on how close each guess is to the true location as in Geoguessr, with a maximum of <b>5000 points: $$g(d) = 5000 \\exp(\\frac{-d}{1492.7})$$ </h3>
 """
 css = """
 @font-face {
@@ -62,7 +61,7 @@ h1 {
     text-align: center;
     display:block;
     font-family: custom;
-    font-size: 2.5em;
+    font-size: 4em;
 }
 img {
     text-align: center;
@@ -72,14 +71,14 @@ h2 {
     text-align: center;
     display:block;
     font-family: custom;
-    font-size: 2em;
+    font-size: 3em;
 }
 h3 {
     text-align: center;
     display:block;
     font-family: custom;
     font-weight: normal;
-    font-size: 1.5em;
+    font-size: 2em;
 }
 """
 
@@ -88,9 +87,6 @@ space_js = """
 <script type="text/javascript"
   src="http://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
 </script>
-<script type="text/x-mathjax-config">
-  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
-</script>
 <script>
 function shortcuts(e) {
     var event = document.all ? window.event : e;