Update app.py

app.py

@@ -30,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]
@@ -46,8 +46,14 @@ def generate_output(word):
     return img, audio_file
 
 # Create the quiz function
-def quiz(word, answer):
-    if answer == word_definitions[word]:
+def quiz(definition, selected_word):
+    correct_word = None
+    for word, defn in word_definitions.items():
+        if defn == definition:
+            correct_word = word
+            break
+    
+    if selected_word == correct_word:
         return "Correct!"
     else:
         return "Incorrect, try again."
@@ -56,7 +62,7 @@ def quiz(word, answer):
 iface = gr.Blocks()
 
 with iface:
-    gr.Markdown("# Vocabulary Builder with Quiz and Drag-and-Drop Activity")
+    gr.Markdown("# Vocabulary Builder with Quiz")
     
     with gr.Tab("Learn Words"):
         word_dropdown = gr.Dropdown(choices=list(word_definitions.keys()), label="Choose a word")
@@ -66,68 +72,10 @@ with iface:
         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")
+        definition_text = gr.Dropdown(choices=list(word_definitions.values()), label="Choose the correct word for this definition")
+        wordbank = gr.Dropdown(choices=list(word_definitions.keys()), label="Wordbank")
         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>
-        """)
+        quiz_button.click(quiz, inputs=[definition_text, wordbank], outputs=quiz_result)
 
 iface.launch(debug=True)