Skip to content

Commit

Permalink
Styling formAvaliation #15
Browse files Browse the repository at this point in the history
  • Loading branch information
@JaumHttps
JaumHttps committed Mar 16, 2023
1 parent 47ad46d commit 615f09e
Show file tree
Hide file tree
Showing 11 changed files with 277 additions and 182 deletions.
5 changes: 5 additions & 0 deletions vite-client/src/Pages/Home/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@ export function Home(){
style={{color: '#fff', marginTop: '20px', border:'1px solid white', padding:'6px', borderRadius:'10px', textDecoration:'none'}}>
Cadastrar prova ou tarefa
</Link>
<Link
to="/solve-avaliation"
style={{color: '#fff', marginTop: '20px', border:'1px solid white', padding:'6px', borderRadius:'10px', textDecoration:'none'}}>
Responder prova ou tarefa
</Link>
</HomePage>
)
}
179 changes: 102 additions & 77 deletions vite-client/src/Pages/SolveAvaliation/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,64 @@
import { useEffect, useState } from "react"
import React from "react";
import { AlternativeQuestion, PropsAlternative } from "../../components/AlternativeQuestion"
import { useEffect, useState } from 'react'
import React from 'react'
import {
AlternativeQuestion,
PropsAlternative
} from '../../components/AlternativeQuestion'
// import { AlternativeQuestion } from "../../components/AlternativeQuestion"
import { Avaliation, QuestionStyle } from "./styles";
import { PropsForm } from "../../components/FormAvaliation"
import { Avaliation, QuestionStyle } from './styles'
import { PropsForm } from '../../components/FormAvaliation'
import { Wrapper } from '../../styles/Layout'

export function SolveAvaliation(){
const [formAvaliation, setFormAvaliation] = useState<PropsForm>( {} as PropsForm )
export function SolveAvaliation() {
const [formAvaliation, setFormAvaliation] = useState<PropsForm>(
{} as PropsForm
)
const [isClick, setIsClick] = useState(false)

const forceUpdate: () => void = useState({})[1].bind(null, {})
const forceUpdate: () => void = useState({})[1].bind(null, {})

useEffect(() => {
fetch('./avaliation.json', {
headers: {
Accept: "application/json"
Accept: 'application/json'
}
}).then(res => res.json())
})
.then(res => res.json())
.then(res => {
setFormAvaliation(res)
// console.log(formAvaliation)
})
},[])
function handleExpectedAnswer(
}, [])

function handleExpectedAnswer(
e: React.ChangeEvent<HTMLTextAreaElement>,
index: number
){
) {
const newQuestion = formAvaliation.questions
if (newQuestion){
if (newQuestion) {
newQuestion[index].answer = e.target.value
}
}

function handleExpectedAnswerAlternative(alternative: PropsAlternative,
e : React.ChangeEvent<HTMLInputElement>){
if (alternative.answerAlternative){
function handleExpectedAnswerAlternative(
alternative: PropsAlternative,
e: React.ChangeEvent<HTMLInputElement>
) {
if (alternative.answerAlternative) {
alternative.answerAlternative = false
}else {
} else {
alternative.answerAlternative = true
}
setFormAvaliation(formAvaliation) //Talvez não esteja sincrono
}

function handleExpectedAnswerTrueFalse(alternative: PropsAlternative, e: React.ChangeEvent<HTMLInputElement>){
if (alternative.answerAlternative){
function handleExpectedAnswerTrueFalse(
alternative: PropsAlternative,
e: React.ChangeEvent<HTMLInputElement>
) {
if (alternative.answerAlternative) {
alternative.answerAlternative = false
}else {
} else {
alternative.answerAlternative = true
}
setFormAvaliation(formAvaliation)
Expand All @@ -55,85 +67,98 @@ export function SolveAvaliation(){

return (
<Avaliation>
{/* <h1>{ formAvaliation.typeAvaliation }</h1> */}
<h2>Tema: {formAvaliation.themeAvaliation}</h2>
<p>Data de inicio - {formAvaliation.initialAvaliation} até {formAvaliation.finalAvaliation}</p>
<p>Tempo: {formAvaliation.time}</p>
<strong>Vale {formAvaliation.points} pontos</strong>
<h3>Questões: </h3>

{
formAvaliation.questions?.map((question, index) => {
if (question.typeQuestion === 'subjective'){
<Wrapper>
{/* <h1>{ formAvaliation.typeAvaliation }</h1> */}
<h2>Tema: {formAvaliation.themeAvaliation}</h2>
<p>
Data de inicio - {formAvaliation.initialAvaliation} até{' '}
{formAvaliation.finalAvaliation}
</p>
<p>Tempo: {formAvaliation.time}</p>
<strong>Vale {formAvaliation.points} pontos</strong>
<h3>Questões: </h3>

{formAvaliation.questions?.map((question, index) => {
if (question.typeQuestion === 'subjective') {
return (
<QuestionStyle key={index} className="question">
<h4>{question.numberQuestion + " - " + question.description}</h4>
<h4>
{question.numberQuestion + ' - ' + question.description}
</h4>
<label htmlFor="description">Resposta:</label>
<br />
<textarea
name="postContent"
rows={4}
cols={40}
value={question.answer}
onChange={ e => handleExpectedAnswer(e, index) }
onChange={e => handleExpectedAnswer(e, index)}
/>
<br />
<br />
</QuestionStyle>
)
}else if (question.typeQuestion === 'objective'){
} else if (question.typeQuestion === 'objective') {
return (
<QuestionStyle>
<h4>{question.numberQuestion + " - " + question.description}</h4>
{
question.alternatives?.map( (alternative, index) => {
return (
<div key={index+1}>
<input
type='checkbox'
onChange={ e => handleExpectedAnswerAlternative(alternative, e) }
/>
<p>{alternative.alternativeData}</p>
</div>
)
})
}
<h4>
{question.numberQuestion + ' - ' + question.description}
</h4>
{question.alternatives?.map((alternative, index) => {
return (
<div key={index + 1}>
<input
type="checkbox"
onChange={e =>
handleExpectedAnswerAlternative(alternative, e)
}
/>
<p>{alternative.alternativeData}</p>
</div>
)
})}
<br />
</QuestionStyle>
</QuestionStyle>
)
}else {
} else {
return (
<QuestionStyle key={index} className="question">
<div>
<h4>{question.numberQuestion + " - " + question.description}</h4>
{
question.alternatives?.map( (alternative, index) => {
return (
<div key={index+1}>
<strong>{'>' + alternative.alternativeData + "-" }</strong>
<label htmlFor="true">Verdadeiro</label>
<input
type='checkbox'
checked={alternative.answerAlternative}
onChange={e => handleExpectedAnswerTrueFalse(alternative, e)}
/>
<label htmlFor="false">falso</label>
<input
type='checkbox'
checked={!alternative.answerAlternative}
onChange={e => handleExpectedAnswerTrueFalse(alternative, e)}
/>
</div>
)
})
}
<h4>
{question.numberQuestion + ' - ' + question.description}
</h4>
{question.alternatives?.map((alternative, index) => {
return (
<div key={index + 1}>
<strong>
{'>' + alternative.alternativeData + '-'}
</strong>
<label htmlFor="true">Verdadeiro</label>
<input
type="checkbox"
checked={alternative.answerAlternative}
onChange={e =>
handleExpectedAnswerTrueFalse(alternative, e)
}
/>
<label htmlFor="false">falso</label>
<input
type="checkbox"
checked={!alternative.answerAlternative}
onChange={e =>
handleExpectedAnswerTrueFalse(alternative, e)
}
/>
</div>
)
})}
<br />
</div>
</div>
</QuestionStyle>
)
}
})
}
})}
</Wrapper>
</Avaliation>
)
}
}
7 changes: 7 additions & 0 deletions vite-client/src/Pages/SolveAvaliation/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,18 @@ export const Avaliation = styled.div`
`

export const QuestionStyle = styled.div`
width: 80%;
background: #272643;
padding: 20px 20px;
color: #fff;
border-radius: 20px;
margin-top: 30px;
textarea {
width: 100%;
}
`
export const Alternatives = styled.div`
`


5 changes: 3 additions & 2 deletions vite-client/src/components/CreateQuestions/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@ import { useState, useContext } from "react"
import { PropsForm } from "../FormAvaliation"
import { GenerateQuestions } from "../GenerateQuestions";
import { ContextQuestions } from "../../context/contextQuestions";
import { SubForm } from "./styles";

export function CreateQuestions({typeAvaliation} : PropsForm) {
// Usando contexto global
const {questions, handleNewQuestion, contQuestions} = useContext(ContextQuestions)
return (
<div>
<SubForm>
<h3>Criando questões da {typeAvaliation === 'exam' ? 'prova' : 'Atividade'}</h3>
<button onClick={handleNewQuestion}>
Adicionar questão
Expand All @@ -34,6 +35,6 @@ export function CreateQuestions({typeAvaliation} : PropsForm) {
:
<p>Nehuma questão foi criada</p>
}
</div>
</SubForm>
)
}
13 changes: 13 additions & 0 deletions vite-client/src/components/CreateQuestions/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,16 @@ export const CreateQuestionsStyled = styled.div`
align-items: center;
`

export const SubForm = styled.div`
width: 100%;
padding: 0 4rem;
label {
color: white;
}
h3 {
color: #272643;
font-size: 2.4rem;
}
`
Loading

0 comments on commit 615f09e

Please sign in to comment.