Skip to content

Commit 0a3f3a7

Browse files
Andra-sunAndra-sun
committed
ajusta escolha entre maneiras de gerar questão
1 parent b29d087 commit 0a3f3a7

10 files changed

Lines changed: 240 additions & 187 deletions

File tree

‎frontend/src/app/(home)/create/questions/automatico/audio.tsx‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export function Audio({ onDataChange, onSubmit }: AudioProps) {
6161
<div ref={formRef} className="max-w-4xl mx-auto">
6262
<div className="mb-6">
6363
<h3 className="text-xl font-bold mb-2">Arquivo de Áudio</h3>
64-
<p className="text-gray-600">
64+
<p className="">
6565
Envie um arquivo de áudio que será transcrito e usado como base para gerar as questões automaticamente
6666
</p>
6767
</div>
@@ -122,14 +122,14 @@ export function Audio({ onDataChange, onSubmit }: AudioProps) {
122122
</svg>
123123
{audioFile ? (
124124
<div>
125-
<p className="text-sm font-medium text-gray-900">{audioFile.name}</p>
125+
<p className="text-sm font-medium ">{audioFile.name}</p>
126126
<p className="text-xs text-gray-500 mt-1">
127127
{(audioFile.size / 1024 / 1024).toFixed(2)} MB
128128
</p>
129129
</div>
130130
) : (
131131
<div>
132-
<p className="text-sm font-medium text-gray-900">
132+
<p className="text-sm font-medium ">
133133
Clique para selecionar um arquivo de áudio
134134
</p>
135135
<p className="text-xs text-gray-500 mt-1">
@@ -151,20 +151,6 @@ export function Audio({ onDataChange, onSubmit }: AudioProps) {
151151
</div>
152152
)}
153153
</div>
154-
155-
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
156-
<div className="flex items-start gap-3">
157-
<svg className="w-5 h-5 text-yellow-600 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
158-
<path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
159-
</svg>
160-
<div>
161-
<p className="text-sm font-medium text-yellow-900">Importante</p>
162-
<p className="text-sm text-yellow-800">
163-
O áudio será transcrito automaticamente. Para melhores resultados, use áudios com boa qualidade de som e fala clara. Clique em "Finalizar" para criar o quiz.
164-
</p>
165-
</div>
166-
</div>
167-
</div>
168154
</div>
169155
);
170156
}

‎frontend/src/app/(home)/create/questions/automatico/automatico.tsx‎

Lines changed: 13 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
"use client";
22

3-
import { useState } from "react";
43
import { Texto } from "./texto";
54
import { Documento } from "./documento";
65
import { Audio } from "./audio";
@@ -16,12 +15,13 @@ export interface AutomaticModeData {
1615
}
1716

1817
interface AutomaticQuestionsProps {
18+
mode: GenerationMode;
19+
onModeSelect: (mode: GenerationMode) => void;
1920
onDataChange: (data: AutomaticModeData | null) => void;
2021
onSubmit?: () => void;
2122
}
2223

23-
export default function AutomaticQuestions({ onDataChange, onSubmit }: AutomaticQuestionsProps) {
24-
const [mode, setMode] = useState<GenerationMode>(null);
24+
export default function AutomaticQuestions({ mode, onModeSelect, onDataChange, onSubmit }: AutomaticQuestionsProps) {
2525

2626
const handleDataChange = (data: { text?: string; file?: File; num_questions: number; num_alternatives: number } | null) => {
2727
if (data && mode) {
@@ -67,16 +67,16 @@ export default function AutomaticQuestions({ onDataChange, onSubmit }: Automatic
6767
<h2 className="text-2xl font-bold mb-2">
6868
Geração Automática de Questões
6969
</h2>
70-
<p className="text-gray-600">
70+
<p>
7171
Escolha como você deseja gerar as questões automaticamente
7272
</p>
7373
</div>
7474

7575
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
7676
{/* Opção: Texto */}
7777
<button
78-
onClick={() => setMode("text")}
79-
className="group bg-layout-card border-2 border-gray-200 rounded-xl p-6 hover:border-blue-500 hover:shadow-lg transition-all duration-200 text-left"
78+
onClick={() => onModeSelect("text")}
79+
className="group bg-layout-card border-2 rounded-xl p-6 hover:border-blue-500 hover:shadow-lg transition-all duration-200 text-left"
8080
>
8181
<div className="w-14 h-14 bg-blue-100 rounded-lg flex items-center justify-center mb-4 group-hover:bg-blue-500 transition-colors">
8282
<svg
@@ -94,16 +94,16 @@ export default function AutomaticQuestions({ onDataChange, onSubmit }: Automatic
9494
</svg>
9595
</div>
9696
<h3 className="text-xl font-semibold mb-2">Texto</h3>
97-
<p className="text-sm text-gray-600">
97+
<p className="text-sm ">
9898
Cole ou digite um texto e gere questões automaticamente
9999
com IA
100100
</p>
101101
</button>
102102

103103
{/* Opção: Documento */}
104104
<button
105-
onClick={() => setMode("document")}
106-
className="group bg-layout-card border-2 border-gray-200 rounded-xl p-6 hover:border-green-500 hover:shadow-lg transition-all duration-200 text-left"
105+
onClick={() => onModeSelect("document")}
106+
className="group bg-layout-card border-2 rounded-xl p-6 hover:border-green-500 hover:shadow-lg transition-all duration-200 text-left"
107107
>
108108
<div className="w-14 h-14 bg-green-100 rounded-lg flex items-center justify-center mb-4 group-hover:bg-green-500 transition-colors">
109109
<svg
@@ -121,15 +121,15 @@ export default function AutomaticQuestions({ onDataChange, onSubmit }: Automatic
121121
</svg>
122122
</div>
123123
<h3 className="text-xl font-semibold mb-2">Documento</h3>
124-
<p className="text-sm text-gray-600">
124+
<p className="text-sm ">
125125
Faça upload de PDF, DOCX ou TXT para gerar questões
126126
</p>
127127
</button>
128128

129129
{/* Opção: Áudio */}
130130
<button
131-
onClick={() => setMode("audio")}
132-
className="group bg-layout-card border-2 border-gray-200 rounded-xl p-6 hover:border-purple-500 hover:shadow-lg transition-all duration-200 text-left"
131+
onClick={() => onModeSelect("audio")}
132+
className="group bg-layout-card border-2 rounded-xl p-6 hover:border-purple-500 hover:shadow-lg transition-all duration-200 text-left"
133133
>
134134
<div className="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-4 group-hover:bg-purple-500 transition-colors">
135135
<svg
@@ -147,39 +147,12 @@ export default function AutomaticQuestions({ onDataChange, onSubmit }: Automatic
147147
</svg>
148148
</div>
149149
<h3 className="text-xl font-semibold mb-2">Áudio</h3>
150-
<p className="text-sm text-gray-600">
150+
<p className="text-sm ">
151151
Envie um arquivo de áudio para transcrever e gerar
152152
questões
153153
</p>
154154
</button>
155155
</div>
156-
157-
<div className="mt-8 p-4 bg-blue-50 border border-blue-200 rounded-lg">
158-
<div className="flex items-start gap-3">
159-
<svg
160-
className="w-5 h-5 text-blue-600 mt-0.5 shrink-0"
161-
fill="currentColor"
162-
viewBox="0 0 20 20"
163-
>
164-
<path
165-
fillRule="evenodd"
166-
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
167-
clipRule="evenodd"
168-
/>
169-
</svg>
170-
<div>
171-
<p className="text-sm font-medium text-blue-900">
172-
Dica
173-
</p>
174-
<p className="text-sm text-blue-800">
175-
A geração automática usa inteligência artificial
176-
para criar questões relevantes baseadas no conteúdo
177-
fornecido. Você poderá revisar e editar as questões
178-
antes de finalizar.
179-
</p>
180-
</div>
181-
</div>
182-
</div>
183156
</div>
184157
);
185158
}

‎frontend/src/app/(home)/create/questions/automatico/documento.tsx‎

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export function Documento({ onDataChange, onSubmit }: DocumentoProps) {
8989
<div ref={formRef} className="max-w-4xl mx-auto">
9090
<div className="mb-6">
9191
<h3 className="text-xl font-bold mb-2">Arquivo de Documento</h3>
92-
<p className="text-gray-600">
92+
<p className="">
9393
Envie um arquivo PDF, DOCX ou TXT que será usado como base para gerar as questões automaticamente
9494
</p>
9595
</div>
@@ -148,7 +148,7 @@ export function Documento({ onDataChange, onSubmit }: DocumentoProps) {
148148
{documentFile ? (
149149
<>
150150
{getFileIcon()}
151-
<p className="text-sm font-medium text-gray-900">{documentFile.name}</p>
151+
<p className="text-sm font-medium ">{documentFile.name}</p>
152152
<p className="text-xs text-gray-500 mt-1">
153153
{(documentFile.size / 1024 / 1024).toFixed(2)} MB
154154
</p>
@@ -158,7 +158,7 @@ export function Documento({ onDataChange, onSubmit }: DocumentoProps) {
158158
<svg className="w-12 h-12 text-green-500 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
159159
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
160160
</svg>
161-
<p className="text-sm font-medium text-gray-900">
161+
<p className="text-sm font-medium ">
162162
Clique para selecionar um documento
163163
</p>
164164
<p className="text-xs text-gray-500 mt-1">
@@ -181,19 +181,6 @@ export function Documento({ onDataChange, onSubmit }: DocumentoProps) {
181181
)}
182182
</div>
183183

184-
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
185-
<div className="flex items-start gap-3">
186-
<svg className="w-5 h-5 text-yellow-600 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
187-
<path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
188-
</svg>
189-
<div>
190-
<p className="text-sm font-medium text-yellow-900">Importante</p>
191-
<p className="text-sm text-yellow-800">
192-
O conteúdo do documento será extraído automaticamente. Para melhores resultados, use documentos bem estruturados e com conteúdo relevante. Clique em "Finalizar" para criar o quiz.
193-
</p>
194-
</div>
195-
</div>
196-
</div>
197184
</div>
198185
);
199186
}

‎frontend/src/app/(home)/create/questions/automatico/texto.tsx‎

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export function Texto({ onDataChange, onSubmit }: TextoProps) {
4949
<div ref={formRef} className="max-w-4xl mx-auto">
5050
<div className="mb-6">
5151
<h3 className="text-xl font-bold mb-2">Texto Base</h3>
52-
<p className="text-gray-600">
52+
<p className="">
5353
Cole ou digite o texto que será usado como base para gerar as questões automaticamente
5454
</p>
5555
</div>
@@ -111,21 +111,6 @@ export function Texto({ onDataChange, onSubmit }: TextoProps) {
111111
)}
112112
</div>
113113
</div>
114-
115-
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
116-
<div className="flex items-start gap-3">
117-
<svg className="w-5 h-5 text-yellow-600 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
118-
<path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
119-
</svg>
120-
<div>
121-
<p className="text-sm font-medium text-yellow-900">Importante</p>
122-
<p className="text-sm text-yellow-800">
123-
Quanto mais detalhado e estruturado for o texto, melhores serão as questões geradas.
124-
Recomendamos textos com pelo menos 200 caracteres. Clique em "Finalizar" para criar o quiz.
125-
</p>
126-
</div>
127-
</div>
128-
</div>
129114
</div>
130115
);
131116
}

‎frontend/src/app/(home)/create/questions/questions.tsx‎

Lines changed: 79 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@
22
"use client";
33

44
import { useState, useEffect } from "react";
5-
import AutomaticQuestions, { AutomaticModeData } from "./automatico/automatico";
5+
import AutomaticQuestions, { AutomaticModeData, GenerationMode } from "./automatico/automatico";
66
import ManualQuestions from "./manual";
77
import { QuestionData } from "../page";
88
import { Button } from "@/components/ui/button";
9+
import { BsPencil } from "react-icons/bs";
910

1011
interface QuestionsProps {
1112
onQuestionsChange: (questions: QuestionData[]) => void;
@@ -26,54 +27,89 @@ export default function Questions({
2627
subTopicId,
2728
onSubmit,
2829
}: QuestionsProps) {
29-
const [mode, setMode] = useState<"manual" | "automatic">("manual");
30+
const [currentMode, setCurrentMode] = useState<GenerationMode | "manual" | null>(null);
3031

3132
useEffect(() => {
32-
onModeChange(mode);
33-
}, [mode, onModeChange]);
33+
if (currentMode === "manual") {
34+
onModeChange("manual");
35+
} else if (currentMode) {
36+
onModeChange("automatic");
37+
}
38+
}, [currentMode, onModeChange]);
3439

35-
return (
36-
<div className="overflow-hidden h-full">
37-
<div className="flex justify-between items-start border-b pb-6 mb-8 overflow-hidden">
38-
<div>
39-
<h1 className="text-3xl font-bold">Questões</h1>
40-
<p >
41-
Você gostaria de fazer as próprias questões ou gerar automaticamente?
42-
</p>
43-
</div>
44-
45-
<div className="flex gap-3 shrink-0">
46-
<Button
47-
type="button"
48-
onClick={() => setMode("manual")}
49-
size="sm"
50-
variant={mode === "manual" ? "solid" : "subtle"}
51-
>
52-
Manual
53-
</Button>
54-
<Button
55-
type="button"
56-
onClick={() => setMode("automatic")}
57-
size="sm"
58-
variant={mode === "automatic" ? "solid" : "subtle"}
59-
>
60-
Automático
61-
</Button>
62-
</div>
63-
</div>
40+
const handleModeSelect = (mode: GenerationMode) => {
41+
setCurrentMode(mode);
42+
};
43+
44+
const handleBack = () => {
45+
setCurrentMode(null);
46+
};
6447

65-
<div className="overflow-auto h-fit">
66-
{mode === "manual" ? (
48+
if (currentMode === "manual") {
49+
return (
50+
<div className="h-full flex flex-col">
51+
<div className="mb-4">
52+
<Button variant="ghost" onClick={handleBack} className="mb-2">
53+
← Voltar para seleção
54+
</Button>
55+
</div>
6756
<ManualQuestions
68-
onQuestionsChange={onQuestionsChange}
69-
questions={questions}
70-
onSubmit={onSubmit}
71-
/>
72-
) : (
73-
<AutomaticQuestions
74-
onDataChange={onAutomaticDataChange}
57+
onQuestionsChange={onQuestionsChange}
58+
questions={questions}
59+
onSubmit={onSubmit}
7560
/>
76-
)}
61+
</div>
62+
);
63+
}
64+
65+
// Se for um modo automático específico (text, document, audio), renderiza o AutomaticQuestions com esse modo
66+
if (currentMode && currentMode !== "manual") {
67+
return (
68+
<div className="h-full flex flex-col">
69+
<div className="mb-4">
70+
<Button variant="ghost" onClick={handleBack} className="mb-2">
71+
← Voltar para seleção
72+
</Button>
73+
</div>
74+
<AutomaticQuestions
75+
mode={currentMode}
76+
onModeSelect={handleModeSelect}
77+
onDataChange={onAutomaticDataChange}
78+
onSubmit={onSubmit}
79+
/>
80+
</div>
81+
);
82+
}
83+
84+
// Se não tiver modo selecionado, mostra a tela de seleção unificada
85+
return (
86+
<div className="overflow-hidden h-full">
87+
<div className="overflow-auto h-fit p-1">
88+
{/* Renderiza o componente AutomaticQuestions no modo de seleção (null) */}
89+
<AutomaticQuestions
90+
mode={null}
91+
onModeSelect={handleModeSelect}
92+
onDataChange={onAutomaticDataChange}
93+
/>
94+
95+
{/* Card Manual adicionado abaixo */}
96+
<div className="max-w-5xl mx-auto mt-6">
97+
<h3 className="text-2xl font-bold mb-4">Ou crie manualmente</h3>
98+
<button
99+
onClick={() => setCurrentMode("manual")}
100+
className="w-full group bg-layout-card border-2 rounded-xl p-6 hover:border-orange-500 hover:shadow-lg transition-all duration-200 text-left flex items-center gap-6"
101+
>
102+
<div className="w-14 h-14 bg-orange-100 rounded-lg flex items-center justify-center shrink-0 group-hover:bg-orange-500 transition-colors">
103+
<BsPencil className="w-7 h-7 text-orange-600 group-hover:text-white transition-colors" />
104+
</div>
105+
<div>
106+
<h3 className="text-xl font-semibold mb-2">Manual</h3>
107+
<p className="text-sm">
108+
Crie suas próprias questões do zero, definindo enunciados e alternativas
109+
</p>
110+
</div>
111+
</button>
112+
</div>
77113
</div>
78114
</div>
79115
);

0 commit comments

Comments
 (0)