diff --git a/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx b/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx index 01676fd..f6060ca 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, Snackbar } from '@mui/material'; +import { Button, TextField, NativeSelect, Divider, Dialog, DialogTitle, DialogActions, DialogContent, MenuItem, Select, Snackbar } from '@mui/material'; import ReturnButton from 'src/components/ReturnButton/ReturnButton'; import ApiService from '../../../services/ApiService'; @@ -48,6 +48,21 @@ const QuizForm: React.FC = () => { const [isUploadCollapsed, setIsUploadCollapsed] = useState(true); const [snackbarOpen, setSnackbarOpen] = useState(false); const [snackbarMessage, setSnackbarMessage] = useState(''); + const [copySuccess, setCopySuccess] = useState(null); + + const QuestionVraiFaux = "::Exemple de question vrai/faux:: \n 2+2 \\= 4 ? {T} //Utilisez les valeurs {T}, {F}, {TRUE} et {FALSE}."; + const QuestionChoixMul = "::Ville capitale du Canada:: \nQuelle ville est la capitale du Canada? {\n~ Toronto\n~ Montréal\n= Ottawa #Rétroaction spécifique.\n} // Commentaire non visible (au besoin)"; + const QuestionChoixMulMany = "::Villes canadiennes:: \n Quelles villes trouve-t-on au Canada? { \n~ %33.3% Montréal \n ~ %33.3% Ottawa \n ~ %33.3% Vancouver \n ~ %-100% New York \n ~ %-100% Paris \n#### Rétroaction globale de la question. \n} // Utilisez tilde (signe de vague) pour toutes les réponses. // On doit indiquer le pourcentage de chaque réponse."; + const QuestionCourte = "::Clé et porte:: \n Avec quoi ouvre-t-on une porte? { \n= clé \n= clef \n} // Permet de fournir plusieurs bonnes réponses. // Note: La casse n'est pas prise en compte."; + const QuestionNum = "::Question numérique avec marge:: \nQuel est un nombre de 1 à 5 ? {\n#3:2\n}\n \n// Plage mathématique spécifiée avec des points de fin d'intervalle. \n ::Question numérique avec plage:: \n Quel est un nombre de 1 à 5 ? {\n#1..5\n} \n\n// Réponses numériques multiples avec crédit partiel et commentaires.\n::Question numérique avec plusieurs réponses::\nQuand est né Ulysses S. Grant ? {\n# =1822:0 # Correct ! Crédit complet. \n=%50%1822:2 # Il est né en 1822. Demi-crédit pour être proche.\n}"; + + const templates = [ + { label: 'Vrai/Faux', value: QuestionVraiFaux }, + { label: 'Choix multiples R1', value: QuestionChoixMul }, + { label: 'Choix multiples R2+', value: QuestionChoixMulMany }, + { label: 'Réponse courte', value: QuestionCourte }, + { label: 'Numérique', value: QuestionNum }, + ]; const scrollToTop = () => { window.scrollTo({ top: 0, behavior: 'smooth' }); @@ -221,6 +236,18 @@ const QuizForm: React.FC = () => { } }; + const copyToClipboard = (text: string, label: string) => { + navigator.clipboard.writeText(text) + .then(() => { + setCopySuccess(`Copié dans le presse-papier: ${label}`); + }) + .catch((error) => console.error('Clipboard error:', error)); + }; + + const handleSelectChange = (value: string, label: string) => { + copyToClipboard(value, label); + }; + return (
@@ -271,6 +298,23 @@ const QuizForm: React.FC = () => { ))} + +
+ +
+ setCopySuccess(null)} + message={copySuccess} + anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} + key={copySuccess ? 'open' : 'close'} + /> +
diff --git a/client/src/pages/Teacher/EditorQuiz/editorQuiz.css b/client/src/pages/Teacher/EditorQuiz/editorQuiz.css index a797443..299e4ac 100644 --- a/client/src/pages/Teacher/EditorQuiz/editorQuiz.css +++ b/client/src/pages/Teacher/EditorQuiz/editorQuiz.css @@ -88,4 +88,16 @@ input[type="file"] { .quizEditor { margin: 0 -2rem; /* Counteract the padding */ width: calc(100% + 4rem); /* Expand to fill padded area */ +} + +.sticky-buttons { + display: flex; + justify-content: space-between; + align-items: center; + gap: 8px; + position: sticky; + top: 0; + background: #fff; + z-index: 1000; + padding: 8px 0; } \ No newline at end of file