+
}
onClick={handleOnReturnButtonClick}
color="primary"
sx={{ marginLeft: '-0.5rem', fontSize: 16 }}
+ disabled={isSaving} // Disable button while saving
>
- Retour
+ {isSaving ? 'Enregistrement...' : 'Retour'}
- setShowDialog(false)}
- buttonOrderType="warning"
- />
);
};
diff --git a/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx b/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx
index 89f822a..3a10f03 100644
--- a/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx
+++ b/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx
@@ -11,7 +11,7 @@ import GIFTTemplatePreview from 'src/components/GiftTemplate/GIFTTemplatePreview
import { QuizType } from '../../../Types/QuizType';
import './editorQuiz.css';
-import { Button, TextField, NativeSelect, Divider, Dialog, DialogTitle, DialogActions, DialogContent } from '@mui/material';
+import { Button, TextField, NativeSelect, Divider, Dialog, DialogTitle, DialogActions, DialogContent, Snackbar } from '@mui/material';
import ReturnButton from 'src/components/ReturnButton/ReturnButton';
import ApiService from '../../../services/ApiService';
@@ -29,7 +29,7 @@ const QuizForm: React.FC = () => {
const [filteredValue, setFilteredValue] = useState
([]);
const { id } = useParams();
- const [value, setValue] = useState('');
+ const [values, setValues] = useState([]);
const [isNewQuiz, setNewQuiz] = useState(false);
const [quiz, setQuiz] = useState(null);
const navigate = useNavigate();
@@ -42,6 +42,12 @@ const QuizForm: React.FC = () => {
const [dialogOpen, setDialogOpen] = useState(false);
const [showScrollButton, setShowScrollButton] = useState(false);
+ const [isImagesCollapsed, setIsImagesCollapsed] = useState(true);
+ const [isCheatSheetCollapsed, setIsCheatSheetCollapsed] = useState(true);
+ const [isUploadCollapsed, setIsUploadCollapsed] = useState(true);
+ const [snackbarOpen, setSnackbarOpen] = useState(false);
+ const [snackbarMessage, setSnackbarMessage] = useState('');
+
const scrollToTop = () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
};
@@ -101,7 +107,7 @@ const QuizForm: React.FC = () => {
setQuizTitle(title);
setSelectedFolder(folderId);
setFilteredValue(content);
- setValue(quiz.content.join('\n\n'));
+ setValues(content);
} catch (error) {
window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`)
@@ -113,21 +119,17 @@ const QuizForm: React.FC = () => {
fetchData();
}, [id]);
- function handleUpdatePreview(value: string) {
- if (value !== '') {
- setValue(value);
- }
+ const handleAddQuestion = () => {
+ console.log("Adding question");
+ console.log("Current values:", values); // Log current state
+ setValues([...values, '']);
+ console.log("Updated values:", [...values, '']); // Log new state
+ };
- // split value when there is at least one blank line
- const linesArray = value.split(/\n{2,}/);
-
- // if the first item in linesArray is blank, remove it
- if (linesArray[0] === '') linesArray.shift();
-
- if (linesArray[linesArray.length - 1] === '') linesArray.pop();
-
- setFilteredValue(linesArray);
- }
+ const handleUpdatePreview = (newValues: string[]) => {
+ setValues(newValues);
+ setFilteredValue(newValues.filter(value => value.trim() !== ''));
+ };
const handleQuizTitleChange = (event: React.ChangeEvent) => {
setQuizTitle(event.target.value);
@@ -135,7 +137,6 @@ const QuizForm: React.FC = () => {
const handleQuizSave = async () => {
try {
- // check if everything is there
if (quizTitle == '') {
alert("Veuillez choisir un titre");
return;
@@ -154,7 +155,8 @@ const QuizForm: React.FC = () => {
}
}
- navigate('/teacher/dashboard');
+ setSnackbarMessage('Quiz enregistré avec succès!');
+ setSnackbarOpen(true);
} catch (error) {
window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`)
console.log(error)
@@ -166,6 +168,10 @@ const QuizForm: React.FC = () => {
return Chargement...
;
}
+ const handleSnackbarClose = () => {
+ setSnackbarOpen(false);
+ };
+
const handleSaveImage = async () => {
try {
const inputElement = document.getElementById('file-input') as HTMLInputElement;
@@ -204,16 +210,29 @@ const QuizForm: React.FC = () => {
navigator.clipboard.writeText(link);
}
+ const handleFocusQuestion = (index: number) => {
+ const previewElement = document.querySelector('.preview-column');
+ if (previewElement) {
+ const questionElements = previewElement.querySelectorAll('.question-item');
+ if (questionElements[index]) {
+ questionElements[index].scrollIntoView({ behavior: 'smooth', block: 'start' });
+ }
+ }
+ };
+
return (
-
Éditeur de quiz
+
Éditeur de Quiz
@@ -253,74 +272,121 @@ const QuizForm: React.FC = () => {
-
-
-
-
-
+
Prévisualisation
@@ -328,7 +394,6 @@ const QuizForm: React.FC = () => {
-
{showScrollButton && (
@@ -342,9 +407,17 @@ const QuizForm: React.FC = () => {
↑
)}
+
+
);
-};
+};
const scrollToTopButtonStyle: CSSProperties = {
position: 'fixed',
diff --git a/client/src/pages/Teacher/EditorQuiz/editorQuiz.css b/client/src/pages/Teacher/EditorQuiz/editorQuiz.css
index 79157ff..a797443 100644
--- a/client/src/pages/Teacher/EditorQuiz/editorQuiz.css
+++ b/client/src/pages/Teacher/EditorQuiz/editorQuiz.css
@@ -80,6 +80,12 @@ input[type="file"] {
.quizEditor .editSection .preview {
flex: 50%;
padding: 5px;
-
overflow: auto;
+ height: 100%;
+ position: relative;
}
+
+.quizEditor {
+ margin: 0 -2rem; /* Counteract the padding */
+ width: calc(100% + 4rem); /* Expand to fill padded area */
+}
\ No newline at end of file