Merge pull request #54 from ES2-UFPI/@jaumVitor

Styling component questions and alternatives #15
ES2-UFPI · Mar 17, 2023 · 140cb81 · 140cb81
2 parents 912f29a + 6ef121c
commit 140cb81
Show file tree

Hide file tree

Showing 6 changed files with 219 additions and 78 deletions.
diff --git a/vite-client/src/Pages/CreateAvaliation/styles.ts b/vite-client/src/Pages/CreateAvaliation/styles.ts
@@ -12,7 +12,7 @@ export const CreateTaskOrExamStyled = styled.div`
 
   label {
     width: 50%;
-    margin-bottom: 1rem;
+    /* margin-bottom: .5rem; */
   }
 
   select {

diff --git a/vite-client/src/components/CreateQuestions/index.tsx b/vite-client/src/components/CreateQuestions/index.tsx
@@ -3,17 +3,17 @@ import { useState, useContext } from "react"
 import { PropsForm } from "../FormAvaliation"
 import { GenerateQuestions } from "../GenerateQuestions";
 import { ContextQuestions } from "../../context/contextQuestions";
-import { SubForm } from "./styles";
+import { ButtonAddQuestion, SubForm } from "./styles";
 
 export function CreateQuestions({typeAvaliation} : PropsForm) {
   // Usando contexto global
   const {questions, handleNewQuestion, contQuestions} = useContext(ContextQuestions)
   return (
     <SubForm>
       <h3>Criando questões da {typeAvaliation === 'exam' ? 'prova' : 'Atividade'}</h3>
-      <button onClick={handleNewQuestion}>
+      <ButtonAddQuestion onClick={handleNewQuestion}>
         Adicionar questão
-      </button>
+      </ButtonAddQuestion>
       { 
         contQuestions > 0 ? 
           // Renderizando elementos do array dentro do component de quetões

diff --git a/vite-client/src/components/CreateQuestions/styles.ts b/vite-client/src/components/CreateQuestions/styles.ts
@@ -20,4 +20,21 @@ export const SubForm = styled.div`
     color: #272643; 
     font-size: 2.4rem;
   }
+
+  textarea {
+    border-radius: .8rem;
+  }
 `
+
+export const ButtonAddQuestion = styled.button `
+  margin: 1rem 0 1rem;
+  border-radius: .8rem;
+  padding: .5rem 2rem;
+  border: none; 
+  cursor: pointer;
+
+  :hover {
+    background-color: rgb(39, 38, 67, 0.09);
+  }
+`
+
diff --git a/vite-client/src/components/FormAvaliation/styles.ts b/vite-client/src/components/FormAvaliation/styles.ts
@@ -13,7 +13,7 @@ export const Form = styled.form `
   display: flex;
   flex-direction: column;
   align-items: left;
-  gap: 1rem;
+  gap: .5rem;
 
   h2 {
     margin-bottom: 1rem;  
@@ -30,6 +30,7 @@ export const Form = styled.form `
     border: none;
     height: 4rem;
     padding: 2rem;
+    margin-bottom: 1rem;
   }
   
   hr {
@@ -40,3 +41,4 @@ export const Form = styled.form `
   }
 `
 
+
diff --git a/vite-client/src/components/GenerateQuestions/index.tsx b/vite-client/src/components/GenerateQuestions/index.tsx
@@ -1,6 +1,6 @@
 import { useContext, useState } from "react"
 
-import { GenerateQuestionStyled } from "./styles"
+import { Alternative, ButtonAddAlternative, ButtonDeleteQuestion, GenerateQuestionStyled, TypeQuestion } from "./styles"
 
 import { ContextQuestions } from "../../context/contextQuestions"
 import { PropsAlternative } from "../AlternativeQuestion"
@@ -123,22 +123,22 @@ export function GenerateQuestions({ typeQuestion, description, points, ...props
   return (
     <GenerateQuestionStyled>
       <div>
-        <label htmlFor="typeQuestion">Qual tipo da questão: </label>
-        <select
-          name="typeQuestion"
-          id="typeQuestion"
-          value={typeQuestion}
-          onChange={ e => handleOnChangeTypeQuestion(e) } 
-        >
-          {list.map((option, i) => (
-            <option key={i} value={option.id}>
-              {option.type}
-            </option>
-          ))}
-        </select>
-        <br />
+        <TypeQuestion>
+          <label htmlFor="typeQuestion">Qual tipo da questão: </label>
+          <select
+            name="typeQuestion"
+            id="typeQuestion"
+            value={typeQuestion}
+            onChange={ e => handleOnChangeTypeQuestion(e) }
+          >
+            {list.map((option, i) => (
+              <option key={i} value={option.id}>
+                {option.type}
+              </option>
+            ))}
+          </select>
+        </TypeQuestion>
         <label htmlFor="description">Qual enunciado da questão: </label>
-        <br />
         <textarea
           name="postContent"
           rows={4}
@@ -152,46 +152,48 @@ export function GenerateQuestions({ typeQuestion, description, points, ...props
             <legend>
               <h3>Questão verdadeira ou falsa</h3>
             </legend>
-            <button 
+            <ButtonAddAlternative 
               type="button"
               onClick={ e => handleAddAlternative(e) }>
               +
-            </button>
+            </ButtonAddAlternative>
             { 
               // Renderizar alternativas para cada questão
               questions[props.id].alternatives ?
                 questions[props.id].alternatives?.map((alternative, index) => {
                   return (
-                    <div key={index}>
+                    <Alternative key={index}>
                       <label htmlFor="alternative">Enunciado da alternativa: </label>
                       <input 
                         type="text" 
                         id="alternative"
                         value={alternative.alternativeData}  
                         onChange={ event => handleInputChange(event, index)}
                       />
-                      <button 
-                        type="button"
-                        onClick={ () => handleRemoveAlternative(index) }>
-                        x
-                      </button>
 
-                      <br />
-                      <label htmlFor="choiceAlternative">Verdadeira</label>
-                      <input 
-                        type="checkbox" 
-                        checked={alternative.isCorrect}
-                        onClick={ () => handleIsCorrect(index) }  
-                      />
+                      <div className="trueFalse">
+                        <input
+                          type="checkbox"
+                          checked={alternative.isCorrect}
+                          onClick={ () => handleIsCorrect(index) }
+                        />
+                        <label htmlFor="choiceAlternative">Verdadeira</label>
 
-                      <label htmlFor="choiceAlternative">Falsa</label>
-                      <input 
-                        type="checkbox" 
-                        checked={!alternative.isCorrect} 
-                        defaultChecked
-                        onClick={ () => handleIsCorrect(index) }  
-                      />
-                    </div>
+                        <input
+                          type="checkbox"
+                          checked={!alternative.isCorrect}
+                          defaultChecked
+                          onClick={ () => handleIsCorrect(index) }
+                        />
+                        <label htmlFor="choiceAlternative">Falsa</label>
+
+                        <button 
+                          type="button"
+                          onClick={ () => handleRemoveAlternative(index) }>
+                          Deletar alternativa
+                        </button>
+                      </div>
+                    </Alternative>
                   )
                 })
                 : 
@@ -203,34 +205,40 @@ export function GenerateQuestions({ typeQuestion, description, points, ...props
             <legend>
               <h3>Questão objetiva</h3>
             </legend>
-            <button 
+            <ButtonAddAlternative
               type="button"
               onClick={ e => handleAddAlternative(e) }>
               +
-            </button>
+            </ButtonAddAlternative>
             { 
               // Renderizar alternativas para cada questão
               questions[props.id].alternatives ?
                 questions[props.id].alternatives?.map((alternative, index) => {
                   return (
-                    <div key={index}>
+                    <Alternative key={index}>
                       <label htmlFor="alternative">Enunciado da alternativa: </label>
-                      <input 
-                        type="text" 
+                      <input
+                        type="text"
                         id="alternative"
-                        value={alternative.alternativeData}  
+                        value={alternative.alternativeData}
                         onChange={ event => handleInputChange(event, index)}
                       />
-                      <input 
-                        type="checkbox" 
-                        onClick={ () => handleIsCorrect(index) } 
-                      />
-                      <button 
-                        type="button"
-                        onClick={ () => handleRemoveAlternative(index) }>
-                        x
-                      </button>
-                    </div>
+
+                      <div className="objective">
+                        <div>
+                          <label htmlFor="alternative">Opção correta ?</label>
+                          <input
+                            type="checkbox"
+                            onClick={ () => handleIsCorrect(index) }
+                          />
+                        </div>
+                        <button
+                          type="button"
+                          onClick={ () => handleRemoveAlternative(index) }>
+                          Deletar alternativa
+                        </button>
+                      </div>
+                    </Alternative>
                   )
                 })
                 : 
@@ -243,7 +251,6 @@ export function GenerateQuestions({ typeQuestion, description, points, ...props
               <h3>Questão subjetiva</h3>
             </legend>
             <label htmlFor="response">Resposta esperada da questão </label>
-            <br />
             <textarea
               name="postContent"
               rows={4}
@@ -253,27 +260,17 @@ export function GenerateQuestions({ typeQuestion, description, points, ...props
             />
           </div>
         ) : null}
-        <br />
+        <hr />
         <label htmlFor="points">Pontuação da questão: </label>
         <input
           value={points}
           onChange={e => handleOnChangePoints(e)}
           type="number"
         />
-        <br />
-        <button
-          style={
-            {
-              marginTop: "1rem",
-              paddingBlock: ".5rem",
-              paddingInline: "2rem",
-              borderRadius: "2rem",
-              border: "none",
-            }
-          }
+        <ButtonDeleteQuestion
           onClick={handleDeleteQuestion}>
           Excluir
-        </button>
+        </ButtonDeleteQuestion>
       </div>
     </GenerateQuestionStyled>
   )