Create app.py

app.py

@@ -0,0 +1,45 @@
+import gradio as gr
+
+# Image filenames
+wordcloud_images = ["wordcloud_intro.png", "wordcloud_body.png", "wordcloud_conclusion.png"]
+scrambled_images = ["image1.png", "image2.png", "image3.png", "image4.png", "image5.png", "image6.png"]
+correct_order = ["image1.png", "image2.png", "image3.png", "image4.png", "image5.png", "image6.png"]
+
+# Function to check the order of images
+attempts = 3
+def check_sequence(*images):
+    global attempts
+    if list(images) == correct_order:
+        attempts = 3
+        return "Wow! Good job! :)"
+    else:
+        attempts -= 1
+        if attempts > 0:
+            return f"Oops! Would you try again? You have {attempts} attempts left."
+        else:
+            attempts = 3
+            return "Oops! No more attempts left. Please try again."
+
+# Gradio interface
+with gr.Blocks() as demo:
+    gr.Markdown("## Pre-reading Activity: Image Sequencing")
+    
+    gr.Markdown("### Look at the Wordcloud images below:")
+    with gr.Row():
+        for img in wordcloud_images:
+            gr.Image(img, label=img.split('.')[0])
+    
+    gr.Markdown("### Unscramble the images below:")
+    with gr.Row():
+        for img in scrambled_images:
+            gr.Image(img, label=img.split('/')[-1])
+    
+    gr.Markdown("### Select the images in the correct order:")
+    image_inputs = [gr.Dropdown(choices=scrambled_images, label=f"Image {i+1}") for i in range(6)]
+    
+    result = gr.Textbox(label="Feedback", interactive=False)
+    
+    check_button = gr.Button("Check Order")
+    check_button.click(check_sequence, inputs=image_inputs, outputs=result)
+
+demo.launch()