Merge pull request #374 from KevinLin1013/fixImageQuestion

image question no longer squished to square
codekids-vt · Jun 10, 2024 · 16eda1b · 16eda1b
2 parents 0d09703 + 2c54058
commit 16eda1b
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 27 deletions.
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -1,21 +1,22 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#000000" />
-  <link href="./output.css" rel="stylesheet" />
-  <meta name="description"
-    content="CodeKids offers a wide range of engaging coding activities for students of all levels, Teachers will find activities that match their lesson plans and teaching materials to make coding education exciting in the classroom." />
-  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-  <!--
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link href="./output.css" rel="stylesheet" />
+    <meta
+      name="description"
+      content="CodeKids offers a wide range of engaging coding activities for students of all levels, Teachers will find activities that match their lesson plans and teaching materials to make coding education exciting in the classroom."
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <!--
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -24,13 +25,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <title>Codekids</title>
-</head>
+    <title>Codekids</title>
+  </head>
 
-<body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root"></div>
-  <!--
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -40,6 +41,5 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-</body>
-
-</html>
+  </body>
+</html>
diff --git a/frontend/src/components/ImageQuestion.tsx b/frontend/src/components/ImageQuestion.tsx
@@ -16,11 +16,7 @@ export function ImageQuestion({
 
   return (
     <div className="w-full h-full flex flex-col items-center justify-center">
-      <img
-        src={props.image}
-        alt={props.question}
-        className="h-1/2 aspect-square"
-      />
+      <img src={props.image} alt={props.question} className="h-1/2" />
       <MultipleChoiceQuestion
         question={props.question}
         answers={props.answers}