Update app.py

app.py

@@ -3,6 +3,7 @@ from gtts import gTTS
 from PIL import Image
 import requests
 from io import BytesIO
+import random
 
 # Manually add definitions
 word_definitions = {
@@ -16,7 +17,7 @@ word_definitions = {
     "whisper": "To speak very softly or quietly."
 }
 
-# Corresponding image URLs (example URLs, replace with actual GitHub links)
+# Corresponding image URLs
 image_urls = {
     "quaint": "https://raw.githubusercontent.com/PAMUS-JP30/flashcard/main/001.png",
     "explore": "https://raw.githubusercontent.com/PAMUS-JP30/flashcard/main/002.png",
@@ -29,7 +30,7 @@ image_urls = {
 }
 
 def generate_output(word):
-    definition = word + "." + "It means" + word_definitions[word]
+    definition = word + "." + " It means " + word_definitions[word]
     
     # Get the image
     image_url = image_urls[word]
@@ -44,13 +45,89 @@ def generate_output(word):
     
     return img, audio_file
 
+# Create the quiz function
+def quiz(word, answer):
+    if answer == word_definitions[word]:
+        return "Correct!"
+    else:
+        return "Incorrect, try again."
+
 # Create the Gradio interface
-iface = gr.Interface(
-    fn=generate_output,
-    inputs=gr.Dropdown(choices=list(word_definitions.keys()), label="Choose a word"),
-    outputs=[gr.Image(type="pil"), gr.Audio(type="filepath", autoplay=True)],
-    title="Word Definition with Image and Audio"
-)
-
-# Launch the interface
-iface.launch(debug=True)
+iface = gr.Blocks()
+
+with iface:
+    gr.Markdown("# Vocabulary Builder with Quiz and Drag-and-Drop Activity")
+    
+    with gr.Tab("Learn Words"):
+        word_dropdown = gr.Dropdown(choices=list(word_definitions.keys()), label="Choose a word")
+        img_output = gr.Image(type="pil")
+        audio_output = gr.Audio(type="filepath", autoplay=True)
+        learn_button = gr.Button("Learn")
+        learn_button.click(generate_output, inputs=word_dropdown, outputs=[img_output, audio_output])
+    
+    with gr.Tab("Quiz"):
+        quiz_word = gr.Dropdown(choices=list(word_definitions.keys()), label="Choose a word to quiz")
+        quiz_input = gr.Textbox(label="Type the definition")
+        quiz_button = gr.Button("Submit")
+        quiz_result = gr.Textbox(label="Result")
+        quiz_button.click(quiz, inputs=[quiz_word, quiz_input], outputs=quiz_result)
+    
+    with gr.Tab("Drag-and-Drop Activity"):
+        gr.HTML("""
+        <div style="display: flex; flex-direction: row; justify-content: space-around;">
+            <div style="width: 30%;">
+                <h3>Words</h3>
+                <div id="words" ondrop="drop(event)" ondragover="allowDrop(event)">
+                    """ + "".join([f'<div id="{word}" draggable="true" ondragstart="drag(event)">{word}</div>' for word in word_definitions.keys()]) + """
+                </div>
+            </div>
+            <div style="width: 30%;">
+                <h3>Images</h3>
+                <div id="images" ondrop="drop(event)" ondragover="allowDrop(event)">
+                    """ + "".join([f'<img id="{word}_img" src="{url}" draggable="true" ondragstart="drag(event)" width="100"/>' for word, url in image_urls.items()]) + """
+                </div>
+            </div>
+            <div style="width: 30%;">
+                <h3>Definitions</h3>
+                <div id="definitions" ondrop="drop(event)" ondragover="allowDrop(event)">
+                    """ + "".join([f'<div id="{word}_def" draggable="true" ondragstart="drag(event)">{definition}</div>' for word, definition in word_definitions.items()]) + """
+                </div>
+            </div>
+        </div>
+        <button onclick="checkMatch()">Check Match</button>
+        <div id="result"></div>
+        <script>
+        function allowDrop(ev) {
+            ev.preventDefault();
+        }
+
+        function drag(ev) {
+            ev.dataTransfer.setData("text", ev.target.id);
+        }
+
+        function drop(ev) {
+            ev.preventDefault();
+            var data = ev.dataTransfer.getData("text");
+            ev.target.appendChild(document.getElementById(data));
+        }
+
+        function checkMatch() {
+            let result = '';
+            const words = document.getElementById('words').children;
+            const images = document.getElementById('images').children;
+            const definitions = document.getElementById('definitions').children;
+
+            for (let word of words) {
+                if (document.getElementById(word.id).parentElement.id === 'definitions' &&
+                    document.getElementById(word.id + '_img').parentElement.id === 'images') {
+                    result += word.id + ' matched correctly!<br>';
+                } else {
+                    result += word.id + ' did not match.<br>';
+                }
+            }
+            document.getElementById('result').innerHTML = result;
+        }
+        </script>
+        """)
+
+iface.launch(debug=True)