From 38b2a333695fd090222b7ee58c3e7d271fa21ca1 Mon Sep 17 00:00:00 2001
From: ahmed531998 <ahmed531998@aucegypt.edu>
Date: Thu, 6 Apr 2023 23:18:58 +0200
Subject: [PATCH] fix_class

---
 src/FeedbackForm.js | 38 +++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/FeedbackForm.js b/src/FeedbackForm.js
index f8e6dab..ad8e453 100644
--- a/src/FeedbackForm.js
+++ b/src/FeedbackForm.js
@@ -50,10 +50,10 @@ const FeedbackForm = (props) => {
   }
 
   return (
-        <div id="feedback-window" class="feedback-box">
+        <div id="feedback-window" className="feedback-box">
           <form id="feedback-form">
-            <div class="feedback-question">
-              <label for="response-length">
+            <div className="feedback-question">
+              <label htmlFor="response-length">
                 What do you think of the length of the response?
               </label>
               <select
@@ -66,8 +66,8 @@ const FeedbackForm = (props) => {
                 <option value="long">long</option>
               </select>
             </div>
-            <div class="feedback-question">
-              <label for="response-fluency">
+            <div className="feedback-question">
+              <label htmlFor="response-fluency">
                 How would you rate the fluency of the response?
               </label>
               <select
@@ -80,8 +80,8 @@ const FeedbackForm = (props) => {
                 <option value="fluent">fluent</option>
               </select>
             </div>
-            <div class="feedback-question">
-              <label for="response-truthfulness">
+            <div className="feedback-question">
+              <label htmlFor="response-truthfulness">
                 If applicable, was the response true?
               </label>
               <select
@@ -94,8 +94,8 @@ const FeedbackForm = (props) => {
                 <option value="NA">NA</option>
               </select>
             </div>
-            <div class="feedback-question">
-              <label for="response-usefulness">
+            <div className="feedback-question">
+              <label htmlFor="response-usefulness">
                 Was your need satisfied by this response?
               </label>
               <select
@@ -107,8 +107,8 @@ const FeedbackForm = (props) => {
                 <option value="no">no</option>
               </select>
             </div>
-            <div class="feedback-question">
-              <label for="response-time">
+            <div className="feedback-question">
+              <label htmlFor="response-time">
                 How fast was it to produce the response?
               </label>
               <select
@@ -121,8 +121,8 @@ const FeedbackForm = (props) => {
                 <option value="acceptable">acceptable</option>
               </select>
             </div>
-            <div class="feedback-question">
-              <label for="query-intent">What was your intent?</label>
+            <div className="feedback-question">
+              <label htmlFor="query-intent">What was your intent?</label>
               <select
                 id="query-intent"
                 name="What was your intent?"
@@ -138,8 +138,8 @@ const FeedbackForm = (props) => {
                 <option value="NA">NA</option>
               </select>
             </div>
-            <div class="feedback-question">
-              <label for="query-correctness">
+            <div className="feedback-question">
+              <label htmlFor="query-correctness">
                 Was this modification to the query correct? {messages[0].modQuery}
               </label>
               <select
@@ -151,7 +151,7 @@ const FeedbackForm = (props) => {
                 <option value="no">no</option>
               </select>
             </div>
-            <label for="correct-query">
+            <label htmlFor="correct-query">
               Could you provide a modified context-free
               (chat-history-independent) version of your query?
             </label>
@@ -161,8 +161,8 @@ const FeedbackForm = (props) => {
               onChange={(e) => setModQuery(e.target.value)}
             ></textarea>
             '
-            <div class="feedback-question">
-              <label for="preferred response">
+            <div className="feedback-question">
+              <label htmlFor="preferred response">
                 Would you write a better response?
               </label>
               <textarea
@@ -172,7 +172,7 @@ const FeedbackForm = (props) => {
               ></textarea>
               '
             </div>
-            <div class="feedback-submit">
+            <div className="feedback-submit">
               <input type="submit" value="Submit" onClick={onSubmit} />
             </div>
           </form>