Merge pull request #11 from iampat/iampat/flashcard

play with css

apps/flashcard/100.json

@@ -1,86 +1,50 @@
 [
     {
-        "id": 1,
         "question": "What is the supreme law of the land?",
-        "answer": "the Constitution",
-        "last_try_ts": "",
-        "bucket": 1
+        "answer": "the Constitution"
     },
     {
-        "id": 2,
         "question": "What does the Constitution do?",
-        "answer": "▪ sets up the government, ▪ defines the government, ▪ protects basic rights of Americans",
-        "last_try_ts": "",
-        "bucket": 1
+        "answer": "▪ sets up the government, ▪ defines the government, ▪ protects basic rights of Americans"
     },
     {
-        "id": 3,
         "question": "The idea of self-government is in the first three words of the Constitution. What are these words?",
-        "answer": "We the People",
-        "last_try_ts": "",
-        "bucket": 1
+        "answer": "We the People"
     },
     {
-        "id": 4,
         "question": "What is an amendment?",
-        "answer": "▪ a change (to the Constitution), ▪ an addition (to the Constitution)",
-        "last_try_ts": "",
-        "bucket": 1
+        "answer": "▪ a change (to the Constitution), ▪ an addition (to the Constitution)"
     },
     {
-        "id": 5,
         "question": "What do we call the first ten amendments to the Constitution?",
-        "answer": "▪ the Bill of Rights",
-        "last_try_ts": "",
-        "bucket": 1
+        "answer": "▪ the Bill of Rights"
     },
     {
-        "id": 6,
         "question": "What is one right or freedom from the First Amendment?",
-        "answer": "▪ speech, ▪ religion, ▪ assembly, ▪ press ▪ petition the government",
-        "last_try_ts": "",
-        "bucket": 1
+        "answer": "▪ speech, ▪ religion, ▪ assembly, ▪ press ▪ petition the government"
     },
     {
-        "id": 7,
         "question": "How many amendments does the Constitution have?",
-        "answer": "twenty-seven (27)",
-        "last_try_ts": "",
-        "bucket": 1
+        "answer": "twenty-seven (27)"
     },
     {
-        "id": 8,
         "question": "What did the Declaration of Independence do?",
-        "answer": "▪ announced our independence (from Great Britain) ▪ declared our independence (from Great Britain) ▪ said that the United States is free (from Great Britain)",
-        "last_try_ts": "",
-        "bucket": 1
+        "answer": "▪ announced our independence (from Great Britain) ▪ declared our independence (from Great Britain) ▪ said that the United States is free (from Great Britain)"
     },
     {
-        "id": 9,
         "question": "What are two rights in the Declaration of Independence?",
-        "answer": "▪ life ▪ liberty ▪ pursuit of happiness",
-        "last_try_ts": "",
-        "bucket": 1
+        "answer": "▪ life ▪ liberty ▪ pursuit of happiness"
     },
     {
-        "id": 10,
         "question": "What is freedom of religion?",
-        "answer": "▪ You can practice any religion, or not practice a religion.",
-        "last_try_ts": "",
-        "bucket": 1
+        "answer": "▪ You can practice any religion, or not practice a religion."
     },
     {
-        "id": 11,
         "question": "What is the economic system in the United States?",
-        "answer": "▪ capitalist economy ▪ market economy",
-        "last_try_ts": "",
-        "bucket": 1
+        "answer": "▪ capitalist economy ▪ market economy"
     },
     {
-        "id": 12,
         "question": "What is the “rule of law”?",
-        "answer": "▪ Everyone must follow the law. ▪ Leaders must obey the law. ▪ Government must obey the law. ▪ No one is above the law. ",
-        "last_try_ts": "",
-        "bucket": 1
+        "answer": "▪ Everyone must follow the law. ▪ Leaders must obey the law. ▪ Government must obey the law. ▪ No one is above the law. "
     }
 ]

apps/flashcard/index.html

@@ -20,11 +20,9 @@
         min-width: 160px; /* Adjust the width as needed */
       }
       #answer-box {
-        /* display: none; /* Initially hide the answer */
-        min-height: 50px; /* Reserve space for the answer */
-        /* Adjust the min-height as needed based on the average size of your answers */
+        min-height: 15vh; /* 15% of the viewport height for larger screens */
       }
-      @media (max-width: 600px) {
+      @media only screen and (min-device-width: 375px) and (max-device-width: 812px) {
         .flashcard {
           margin: 10px;
           padding: 10px;
@@ -38,6 +36,14 @@
         #bucket-container {
           min-width: 100px; /* Adjust width as needed */
         }
+        #answer-box {
+          min-height: 70vh; /* 75% of the viewport height for mobile screens in portrait mode */
+        }
+      }
+      @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
+        #answer-box {
+          min-width: 70vw; /* 75% of the viewport width for mobile screens in landscape mode */
+        }
       }
     </style>
   </head>
@@ -71,6 +77,11 @@
             throw new Error(`HTTP error! status: ${response.status}`);
           }
           defaultFlashcards = await response.json();
+          ts = new Date().toISOString();
+          defaultFlashcards.forEach((elem, idx) => {
+            elem.id = idx + 1;
+            elem.last_try_ts = ts;
+          });
           //displayFlashcard(); // Display the first flashcard after loading
         } catch (e) {
           console.error("Could not load flashcards: ", e);