mirror of
https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git
synced 2025-08-11 21:23:54 -04:00
Merge d242ccec34 into ee7a7a0544
This commit is contained in:
NouhailaAater
GitHub
commit
5e6765aa7d
11 changed files with 550 additions and 499 deletions
|
|
@ -1,6 +1,7 @@
|
|||
// GiftCheatSheet.tsx
|
||||
import React, { useState } from 'react';
|
||||
import './giftCheatSheet.css';
|
||||
import FileCopyIcon from '@mui/icons-material/FileCopy';
|
||||
|
||||
const GiftCheatSheet: React.FC = () => {
|
||||
const [copySuccess, setCopySuccess] = useState(false);
|
||||
|
|
@ -42,7 +43,10 @@ const GiftCheatSheet: React.FC = () => {
|
|||
</code>
|
||||
|
||||
</pre>
|
||||
<button onClick={() => copyToClipboard(QuestionVraiFaux)}>Copier</button>
|
||||
<button onClick={() => copyToClipboard(QuestionVraiFaux)}>
|
||||
<FileCopyIcon style={{ fontSize: 18, marginRight: '5px' }} />
|
||||
Copier
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="question-type">
|
||||
|
|
@ -54,7 +58,10 @@ const GiftCheatSheet: React.FC = () => {
|
|||
}
|
||||
</code>
|
||||
</pre>
|
||||
<button onClick={() => copyToClipboard(QuestionChoixMul)}>Copier</button>
|
||||
<button onClick={() => copyToClipboard(QuestionChoixMul)}>
|
||||
{' '}
|
||||
<FileCopyIcon style={{ fontSize: 18, marginRight: '5px' }} /> Copier
|
||||
</button>
|
||||
</div>
|
||||
<div className="question-type">
|
||||
<h4>3. Questions à choix multiple avec plusieurs réponses</h4>
|
||||
|
|
@ -65,7 +72,10 @@ const GiftCheatSheet: React.FC = () => {
|
|||
}
|
||||
</code>
|
||||
</pre>
|
||||
<button onClick={() => copyToClipboard(QuestionChoixMulMany)}>Copier</button>
|
||||
<button onClick={() => copyToClipboard(QuestionChoixMulMany)}>
|
||||
<FileCopyIcon style={{ fontSize: 18, marginRight: '5px' }} />
|
||||
Copier
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="question-type">
|
||||
|
|
@ -75,7 +85,10 @@ const GiftCheatSheet: React.FC = () => {
|
|||
{QuestionCourte}
|
||||
</code>
|
||||
</pre>
|
||||
<button onClick={() => copyToClipboard(QuestionCourte)}>Copier</button>
|
||||
<button onClick={() => copyToClipboard(QuestionCourte)}>
|
||||
{' '}
|
||||
<FileCopyIcon style={{ fontSize: 18, marginRight: '5px' }} /> Copier
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="question-type">
|
||||
|
|
@ -87,7 +100,10 @@ const GiftCheatSheet: React.FC = () => {
|
|||
}
|
||||
</code>
|
||||
</pre>
|
||||
<button onClick={() => copyToClipboard(QuestionNum)}>Copier</button>
|
||||
<button onClick={() => copyToClipboard(QuestionNum)}>
|
||||
{' '}
|
||||
<FileCopyIcon style={{ fontSize: 18, marginRight: '5px' }} /> Copier
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="question-type">
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { Link, useNavigate } from 'react-router-dom';
|
|||
import * as React from 'react';
|
||||
import './header.css';
|
||||
import { Button } from '@mui/material';
|
||||
import ExitToAppIcon from '@mui/icons-material/ExitToApp';
|
||||
|
||||
interface HeaderProps {
|
||||
isLoggedIn: boolean;
|
||||
|
|
@ -28,8 +29,9 @@ const Header: React.FC<HeaderProps> = ({ isLoggedIn, handleLogout }) => {
|
|||
handleLogout();
|
||||
navigate('/');
|
||||
}}
|
||||
startIcon={<ExitToAppIcon />}
|
||||
>
|
||||
Logout
|
||||
Déconnexion
|
||||
</Button>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -59,7 +59,6 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
|
|||
disabled={disableButton}
|
||||
>
|
||||
{showAnswer ? (<div> {(question.isTrue ? '✅' : '❌')}</div>) : ``}
|
||||
<div className={`circle ${selectedTrue}`}>V</div>
|
||||
<div className={`answer-text ${selectedTrue}`}>Vrai</div>
|
||||
|
||||
{showAnswer && answer && question.trueFormattedFeedback && (
|
||||
|
|
@ -76,7 +75,6 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
|
|||
|
||||
>
|
||||
{showAnswer ? (<div> {(!question.isTrue ? '✅' : '❌')}</div>) : ``}
|
||||
<div className={`circle ${selectedFalse}`}>F</div>
|
||||
<div className={`answer-text ${selectedFalse}`}>Faux</div>
|
||||
|
||||
{showAnswer && !answer && question.falseFormattedFeedback && (
|
||||
|
|
|
|||
|
|
@ -21,13 +21,12 @@ const StudentWaitPage: React.FC<Props> = ({ students, launchQuiz, setQuizMode })
|
|||
|
||||
return (
|
||||
<div className="wait">
|
||||
<div className='button'>
|
||||
<div className="button" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleLaunchClick}
|
||||
startIcon={<PlayArrow />}
|
||||
fullWidth
|
||||
sx={{ fontWeight: 600, fontSize: 20 }}
|
||||
sx={{ fontWeight: 600, fontSize: 20, width: 'auto' }}
|
||||
>
|
||||
Lancer
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@ const TeacherModeQuiz: React.FC<TeacherModeQuizProps> = ({
|
|||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleFeedbackDialogClose} color="primary">
|
||||
OK
|
||||
Fermer
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
|
|
|||
|
|
@ -44,7 +44,6 @@ const SimpleLogin: React.FC = () => {
|
|||
variant="outlined"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="Nom d'utilisateur"
|
||||
sx={{ marginBottom: '1rem' }}
|
||||
fullWidth
|
||||
/>
|
||||
|
|
@ -55,7 +54,6 @@ const SimpleLogin: React.FC = () => {
|
|||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Nom de la salle"
|
||||
sx={{ marginBottom: '1rem' }}
|
||||
fullWidth
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -66,6 +66,7 @@ const Dashboard: React.FC = () => {
|
|||
const [selectedRoom, selectRoom] = useState<RoomType>(); // menu
|
||||
const [errorMessage, setErrorMessage] = useState('');
|
||||
const [showErrorDialog, setShowErrorDialog] = useState(false);
|
||||
const [isSearchVisible, setIsSearchVisible] = useState(false);
|
||||
|
||||
// Filter quizzes based on search term
|
||||
// const filteredQuizzes = quizzes.filter(quiz =>
|
||||
|
|
@ -120,6 +121,9 @@ const Dashboard: React.FC = () => {
|
|||
selectRoomByName(event.target.value);
|
||||
}
|
||||
};
|
||||
const toggleSearchVisibility = () => {
|
||||
setIsSearchVisible(!isSearchVisible); // Alterne entre afficher et cacher la barre de recherche
|
||||
};
|
||||
|
||||
// Créer une salle
|
||||
const createRoom = async (title: string) => {
|
||||
|
|
@ -425,30 +429,63 @@ const Dashboard: React.FC = () => {
|
|||
|
||||
return (
|
||||
<div className="dashboard">
|
||||
<div className="title">Tableau de bord</div>
|
||||
{/* Conteneur pour le titre et le sélecteur de salle */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: '20px'
|
||||
}}
|
||||
>
|
||||
{/* Titre tableau de bord */}
|
||||
<div className="title" style={{ fontSize: '30px', fontWeight: 'bold' }}>
|
||||
Tableau de bord
|
||||
</div>
|
||||
|
||||
<div className="roomSelection">
|
||||
<label htmlFor="select-room">Sélectionner une salle: </label>
|
||||
<select value={selectedRoom?._id || ''} onChange={(e) => handleSelectRoom(e)}>
|
||||
{/* Sélecteur de salle */}
|
||||
<div
|
||||
className="roomSelection"
|
||||
style={{ display: 'flex', justifyContent: 'flex-end', gap: '15px' }}
|
||||
>
|
||||
<select
|
||||
value={selectedRoom?._id || ''}
|
||||
onChange={(e) => handleSelectRoom(e)}
|
||||
id="room-select"
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
fontSize: '14px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ccc',
|
||||
backgroundColor: '#fff',
|
||||
maxWidth: '200px',
|
||||
cursor: 'pointer',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
>
|
||||
<option value="" disabled>
|
||||
-- Sélectionner une salle --
|
||||
Sélectionner une salle
|
||||
</option>
|
||||
{rooms.map((room) => (
|
||||
<option key={room._id} value={room._id}>
|
||||
{room.title}
|
||||
</option>
|
||||
))}
|
||||
<option value="add-room">Ajouter salle</option>
|
||||
<option
|
||||
value="add-room"
|
||||
style={{
|
||||
color: 'black',
|
||||
backgroundColor: '#f0f0f0',
|
||||
fontWeight: 'bold'
|
||||
}}
|
||||
>
|
||||
Ajouter une salle
|
||||
</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedRoom && (
|
||||
<div className="roomTitle">
|
||||
<h2>Salle sélectionnée: {selectedRoom.title}</h2>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Dialog pour créer une salle */}
|
||||
<Dialog open={openAddRoomDialog} onClose={() => setOpenAddRoomDialog(false)}>
|
||||
<DialogTitle>Créer une nouvelle salle</DialogTitle>
|
||||
<DialogContent>
|
||||
|
|
@ -463,6 +500,8 @@ const Dashboard: React.FC = () => {
|
|||
<Button onClick={handleCreateRoom}>Créer</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
{/* Dialog d'erreur */}
|
||||
<Dialog open={showErrorDialog} onClose={() => setShowErrorDialog(false)}>
|
||||
<DialogTitle>Erreur</DialogTitle>
|
||||
<DialogContent>
|
||||
|
|
@ -473,101 +512,79 @@ const Dashboard: React.FC = () => {
|
|||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
<div className="search-bar">
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
gap: '20px'
|
||||
}}
|
||||
>
|
||||
{/* Barre de recherche avec un bouton d'icône qui s'affiche ou se cache */}
|
||||
<div
|
||||
className="search-bar"
|
||||
style={{ display: 'flex', gap: '20px', alignItems: 'center' }}
|
||||
>
|
||||
{!isSearchVisible ? (
|
||||
<IconButton
|
||||
onClick={toggleSearchVisibility}
|
||||
sx={{
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ccc',
|
||||
padding: '8px 12px',
|
||||
backgroundColor: '#fff',
|
||||
color: '#5271FF'
|
||||
}}
|
||||
>
|
||||
<Search />
|
||||
</IconButton>
|
||||
) : (
|
||||
// Barre de recherche visible
|
||||
<TextField
|
||||
onChange={handleSearch}
|
||||
value={searchTerm}
|
||||
placeholder="Rechercher un quiz par son titre"
|
||||
placeholder="Rechercher un quiz"
|
||||
fullWidth
|
||||
autoFocus
|
||||
sx={{
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ccc',
|
||||
padding: '8px 12px',
|
||||
backgroundColor: '#fff',
|
||||
maxWidth: '1000px',
|
||||
width: '100%',
|
||||
fontWeight: 500
|
||||
}}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton>
|
||||
<IconButton
|
||||
onClick={toggleSearchVisibility}
|
||||
sx={{
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ccc',
|
||||
backgroundColor: '#fff',
|
||||
color: '#5271FF'
|
||||
}}
|
||||
>
|
||||
<Search />
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="folder">
|
||||
<div className="select">
|
||||
<NativeSelect
|
||||
id="select-folder"
|
||||
color="primary"
|
||||
value={selectedFolderId}
|
||||
onChange={handleSelectFolder}
|
||||
>
|
||||
<option value=""> Tous les dossiers... </option>
|
||||
|
||||
{folders.map((folder: FolderType) => (
|
||||
<option value={folder._id} key={folder._id}>
|
||||
{' '}
|
||||
{folder.title}{' '}
|
||||
</option>
|
||||
))}
|
||||
</NativeSelect>
|
||||
</div>
|
||||
|
||||
<div className="actions">
|
||||
<Tooltip title="Ajouter dossier" placement="top">
|
||||
<IconButton color="primary" onClick={handleCreateFolder}>
|
||||
{' '}
|
||||
<Add />{' '}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Renommer dossier" placement="top">
|
||||
<div>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={handleRenameFolder}
|
||||
disabled={selectedFolderId == ''} // cannot action on all
|
||||
>
|
||||
{' '}
|
||||
<Edit />{' '}
|
||||
</IconButton>
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Dupliquer dossier" placement="top">
|
||||
<div>
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={handleDuplicateFolder}
|
||||
disabled={selectedFolderId == ''} // cannot action on all
|
||||
>
|
||||
{' '}
|
||||
<FolderCopy />{' '}
|
||||
</IconButton>
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Supprimer dossier" placement="top">
|
||||
<div>
|
||||
<IconButton
|
||||
aria-label="delete"
|
||||
color="primary"
|
||||
onClick={handleDeleteFolder}
|
||||
disabled={selectedFolderId == ''} // cannot action on all
|
||||
>
|
||||
{' '}
|
||||
<DeleteOutline />{' '}
|
||||
</IconButton>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ajouter">
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
startIcon={<Add />}
|
||||
onClick={handleCreateQuiz}
|
||||
sx={{ borderRadius: '8px' }}
|
||||
>
|
||||
Ajouter un nouveau quiz
|
||||
Nouveau quiz
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
|
|
@ -575,41 +592,135 @@ const Dashboard: React.FC = () => {
|
|||
color="primary"
|
||||
startIcon={<Upload />}
|
||||
onClick={handleOnImport}
|
||||
sx={{ borderRadius: '8px' }}
|
||||
>
|
||||
Import
|
||||
Importer
|
||||
</Button>
|
||||
</div>
|
||||
<div className="list">
|
||||
|
||||
{/* Conteneur principal avec les actions et la liste des quiz */}
|
||||
<div className="folder" style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
{/* Barre d'outils pour le sélecteur de dossier et les actions */}
|
||||
<div
|
||||
className="folder-toolbar"
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: '20px'
|
||||
}}
|
||||
>
|
||||
{/* Sélecteur de dossier */}
|
||||
<NativeSelect
|
||||
id="select-folder"
|
||||
color="primary"
|
||||
value={selectedFolderId}
|
||||
onChange={handleSelectFolder}
|
||||
sx={{
|
||||
padding: '6px 12px',
|
||||
maxWidth: '180px',
|
||||
borderRadius: '8px',
|
||||
borderColor: '#e0e0e0',
|
||||
'&:hover': { borderColor: '#5271FF' }
|
||||
}}
|
||||
>
|
||||
<option value="">Tous les dossiers...</option>
|
||||
{folders.map((folder) => (
|
||||
<option value={folder._id} key={folder._id}>
|
||||
{folder.title}
|
||||
</option>
|
||||
))}
|
||||
</NativeSelect>
|
||||
|
||||
{/* Actions dossiers */}
|
||||
<div style={{ display: 'flex', gap: '15px' }}>
|
||||
<Tooltip title="Ajouter dossier" placement="top">
|
||||
<IconButton color="primary" onClick={handleCreateFolder}>
|
||||
<Add />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Renommer dossier" placement="top">
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={handleRenameFolder}
|
||||
disabled={selectedFolderId === ''}
|
||||
>
|
||||
<Edit />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Dupliquer dossier" placement="top">
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={handleDuplicateFolder}
|
||||
disabled={selectedFolderId === ''}
|
||||
>
|
||||
<FolderCopy />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Supprimer dossier" placement="top">
|
||||
<IconButton
|
||||
color="error"
|
||||
onClick={handleDeleteFolder}
|
||||
disabled={selectedFolderId === ''}
|
||||
>
|
||||
<DeleteOutline />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Liste des quiz organisés par dossier */}
|
||||
<div className="list" style={{ marginTop: '20px' }}>
|
||||
{Object.keys(quizzesByFolder).map((folderName) => (
|
||||
<CustomCard key={folderName} className="folder-card">
|
||||
<div className="folder-tab">{folderName}</div>
|
||||
<CustomCard
|
||||
key={folderName}
|
||||
className="folder-card"
|
||||
sx={{ marginBottom: '20px' }}
|
||||
>
|
||||
<div
|
||||
className="folder-tab"
|
||||
style={{
|
||||
fontWeight: 'bold',
|
||||
padding: '10px',
|
||||
backgroundColor: '#f5f5f5'
|
||||
}}
|
||||
>
|
||||
{folderName}
|
||||
</div>
|
||||
<CardContent>
|
||||
{quizzesByFolder[folderName].map((quiz: QuizType) => (
|
||||
<div className="quiz" key={quiz._id}>
|
||||
{quizzesByFolder[folderName].map((quiz) => (
|
||||
<div
|
||||
className="quiz"
|
||||
key={quiz._id}
|
||||
style={{ marginBottom: '10px' }}
|
||||
>
|
||||
<div className="title">
|
||||
<Tooltip title="Lancer quiz" placement="top">
|
||||
<div>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={() => handleLancerQuiz(quiz)}
|
||||
disabled={!validateQuiz(quiz.content)}
|
||||
sx={{ width: '100%' }}
|
||||
>
|
||||
{`${quiz.title} (${quiz.content.length} question${
|
||||
{`${quiz.title} (${
|
||||
quiz.content.length
|
||||
} question${
|
||||
quiz.content.length > 1 ? 's' : ''
|
||||
})`}
|
||||
</Button>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div className="actions">
|
||||
<div
|
||||
className="actions"
|
||||
style={{ display: 'flex', gap: '10px' }}
|
||||
>
|
||||
<Tooltip title="Télécharger quiz" placement="top">
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => downloadTxtFile(quiz)}
|
||||
>
|
||||
{' '}
|
||||
<FileDownload />{' '}
|
||||
<FileDownload />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
|
|
@ -618,8 +729,7 @@ const Dashboard: React.FC = () => {
|
|||
color="primary"
|
||||
onClick={() => handleEditQuiz(quiz)}
|
||||
>
|
||||
{' '}
|
||||
<Edit />{' '}
|
||||
<Edit />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
|
|
@ -628,29 +738,23 @@ const Dashboard: React.FC = () => {
|
|||
color="primary"
|
||||
onClick={() => handleDuplicateQuiz(quiz)}
|
||||
>
|
||||
{' '}
|
||||
<ContentCopy />{' '}
|
||||
<ContentCopy />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Supprimer quiz" placement="top">
|
||||
<IconButton
|
||||
aria-label="delete"
|
||||
color="primary"
|
||||
onClick={() => handleRemoveQuiz(quiz)}
|
||||
>
|
||||
{' '}
|
||||
<DeleteOutline />{' '}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Partager quiz" placement="top">
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => handleShareQuiz(quiz)}
|
||||
>
|
||||
{' '}
|
||||
<Share />{' '}
|
||||
<Share />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Supprimer quiz" placement="top">
|
||||
<IconButton
|
||||
color="error"
|
||||
onClick={() => handleRemoveQuiz(quiz)}
|
||||
>
|
||||
<DeleteOutline />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
|
@ -660,6 +764,9 @@ const Dashboard: React.FC = () => {
|
|||
</CustomCard>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Modal d'importation */}
|
||||
<ImportModal
|
||||
open={showImportModal}
|
||||
handleOnClose={() => setShowImportModal(false)}
|
||||
|
|
|
|||
|
|
@ -11,12 +11,22 @@ 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
|
||||
} from '@mui/material';
|
||||
import ReturnButton from 'src/components/ReturnButton/ReturnButton';
|
||||
|
||||
import ApiService from '../../../services/ApiService';
|
||||
import { escapeForGIFT } from '../../../utils/giftUtils';
|
||||
import { Upload } from '@mui/icons-material';
|
||||
import SaveIcon from '@mui/icons-material/Save';
|
||||
|
||||
interface EditQuizParams {
|
||||
id: string;
|
||||
|
|
@ -61,7 +71,7 @@ const QuizForm: React.FC = () => {
|
|||
};
|
||||
}, []);
|
||||
|
||||
const scrollToImagesSection = (event: { preventDefault: () => void; }) => {
|
||||
const scrollToImagesSection = (event: { preventDefault: () => void }) => {
|
||||
event.preventDefault();
|
||||
const section = document.getElementById('images-section');
|
||||
if (section) {
|
||||
|
|
@ -86,10 +96,12 @@ const QuizForm: React.FC = () => {
|
|||
return;
|
||||
}
|
||||
|
||||
const quiz = await ApiService.getQuiz(id) as QuizType;
|
||||
const quiz = (await ApiService.getQuiz(id)) as QuizType;
|
||||
|
||||
if (!quiz) {
|
||||
window.alert(`Une erreur est survenue.\n Le quiz ${id} n'a pas été trouvé\nVeuillez réessayer plus tard`)
|
||||
window.alert(
|
||||
`Une erreur est survenue.\n Le quiz ${id} n'a pas été trouvé\nVeuillez réessayer plus tard`
|
||||
);
|
||||
console.error('Quiz not found for id:', id);
|
||||
navigate('/teacher/dashboard');
|
||||
return;
|
||||
|
|
@ -102,9 +114,8 @@ const QuizForm: React.FC = () => {
|
|||
setSelectedFolder(folderId);
|
||||
setFilteredValue(content);
|
||||
setValue(quiz.content.join('\n\n'));
|
||||
|
||||
} catch (error) {
|
||||
window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`)
|
||||
window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`);
|
||||
console.error('Error fetching quiz:', error);
|
||||
navigate('/teacher/dashboard');
|
||||
}
|
||||
|
|
@ -137,12 +148,12 @@ const QuizForm: React.FC = () => {
|
|||
try {
|
||||
// check if everything is there
|
||||
if (quizTitle == '') {
|
||||
alert("Veuillez choisir un titre");
|
||||
alert('Veuillez choisir un titre');
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedFolder == '') {
|
||||
alert("Veuillez choisir un dossier");
|
||||
alert('Veuillez choisir un dossier');
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -156,8 +167,8 @@ const QuizForm: React.FC = () => {
|
|||
|
||||
navigate('/teacher/dashboard');
|
||||
} catch (error) {
|
||||
window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`)
|
||||
console.log(error)
|
||||
window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`);
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -176,106 +187,123 @@ const QuizForm: React.FC = () => {
|
|||
}
|
||||
|
||||
if (!inputElement.files || inputElement.files.length === 0) {
|
||||
window.alert("Veuillez d'abord choisir une image à téléverser.")
|
||||
window.alert("Veuillez d'abord choisir une image à téléverser.");
|
||||
return;
|
||||
}
|
||||
|
||||
const imageUrl = await ApiService.uploadImage(inputElement.files[0]);
|
||||
|
||||
// Check for errors
|
||||
if(imageUrl.indexOf("ERROR") >= 0) {
|
||||
window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`)
|
||||
if (imageUrl.indexOf('ERROR') >= 0) {
|
||||
window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`);
|
||||
return;
|
||||
}
|
||||
|
||||
setImageLinks(prevLinks => [...prevLinks, imageUrl]);
|
||||
setImageLinks((prevLinks) => [...prevLinks, imageUrl]);
|
||||
|
||||
// Reset the file input element
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = '';
|
||||
}
|
||||
} catch (error) {
|
||||
window.alert(`Une erreur est survenue.\n${error}\nVeuillez réessayer plus tard.`)
|
||||
|
||||
window.alert(`Une erreur est survenue.\n${error}\nVeuillez réessayer plus tard.`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCopyToClipboard = async (link: string) => {
|
||||
navigator.clipboard.writeText(link);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='quizEditor'>
|
||||
|
||||
<div className='editHeader'>
|
||||
<div className="quizEditor">
|
||||
<div
|
||||
className="editHeader"
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: '32px'
|
||||
}}
|
||||
>
|
||||
<ReturnButton
|
||||
askConfirm
|
||||
message={`Êtes-vous sûr de vouloir quitter l'éditeur sans sauvegarder le questionnaire?`}
|
||||
/>
|
||||
|
||||
<div className='title'>Éditeur de quiz</div>
|
||||
|
||||
<div className='dumb'></div>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleQuizSave}
|
||||
sx={{ display: 'flex', alignItems: 'center' }}
|
||||
>
|
||||
<SaveIcon sx={{ fontSize: 20 }} />
|
||||
Enregistrer
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* <h2 className="subtitle">Éditeur</h2> */}
|
||||
<div style={{ textAlign: 'center', marginTop: '30px' }}>
|
||||
<div className="title">Éditeur de quiz</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<TextField
|
||||
onChange={handleQuizTitleChange}
|
||||
value={quizTitle}
|
||||
color="primary"
|
||||
placeholder="Titre du quiz"
|
||||
label="Titre du quiz"
|
||||
fullWidth
|
||||
sx={{ width: '200px', marginTop: '50px' }}
|
||||
/>
|
||||
<label>Choisir un dossier:
|
||||
|
||||
<NativeSelect
|
||||
id="select-folder"
|
||||
color="primary"
|
||||
value={selectedFolder}
|
||||
onChange={handleSelectFolder}
|
||||
disabled={!isNewQuiz}
|
||||
style={{ marginBottom: '16px' }} // Ajout de marge en bas
|
||||
style={{ marginBottom: '16px', width: '200px', marginTop: '10px' }}
|
||||
>
|
||||
<option disabled value=""> Choisir un dossier... </option>
|
||||
|
||||
<option disabled value="">
|
||||
Choisir un dossier...
|
||||
</option>
|
||||
{folders.map((folder: FolderType) => (
|
||||
<option value={folder._id} key={folder._id}> {folder.title} </option>
|
||||
<option value={folder._id} key={folder._id}>
|
||||
{folder.title}
|
||||
</option>
|
||||
))}
|
||||
</NativeSelect></label>
|
||||
|
||||
<Button variant="contained" onClick={handleQuizSave}>
|
||||
Enregistrer
|
||||
</Button>
|
||||
</NativeSelect>
|
||||
</div>
|
||||
|
||||
<Divider style={{ margin: '16px 0' }} />
|
||||
|
||||
<div className='editSection'>
|
||||
|
||||
<div className='edit'>
|
||||
<div className="editSection">
|
||||
<div className="edit">
|
||||
<Editor
|
||||
label="Contenu GIFT du quiz:"
|
||||
initialValue={value}
|
||||
onEditorChange={handleUpdatePreview} />
|
||||
onEditorChange={handleUpdatePreview}
|
||||
/>
|
||||
|
||||
<div className='images'>
|
||||
<div className='upload'>
|
||||
<div className="images">
|
||||
<div className="upload">
|
||||
<label className="dropArea">
|
||||
<input type="file" id="file-input" className="file-input"
|
||||
<input
|
||||
type="file"
|
||||
id="file-input"
|
||||
className="file-input"
|
||||
accept="image/jpeg, image/png"
|
||||
multiple
|
||||
ref={fileInputRef} />
|
||||
ref={fileInputRef}
|
||||
/>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
aria-label='Téléverser'
|
||||
onClick={handleSaveImage}>
|
||||
aria-label="Téléverser"
|
||||
onClick={handleSaveImage}
|
||||
>
|
||||
Téléverser <Upload />
|
||||
</Button>
|
||||
|
||||
</label>
|
||||
<Dialog
|
||||
open={dialogOpen}
|
||||
onClose={() => setDialogOpen(false)} >
|
||||
<Dialog open={dialogOpen} onClose={() => setDialogOpen(false)}>
|
||||
<DialogTitle>Erreur</DialogTitle>
|
||||
<DialogContent>
|
||||
Veuillez d'abord choisir une image à téléverser.
|
||||
|
|
@ -291,22 +319,31 @@ const QuizForm: React.FC = () => {
|
|||
<h4>Mes images :</h4>
|
||||
<div>
|
||||
<div>
|
||||
<div style={{ display: "inline" }}>(Voir section </div>
|
||||
<a href="#images-section"style={{ textDecoration: "none" }} onClick={scrollToImagesSection}>
|
||||
<u><em><h4 style={{ display: "inline" }}> 9. Images </h4></em></u>
|
||||
<div style={{ display: 'inline' }}>(Voir section </div>
|
||||
<a
|
||||
href="#images-section"
|
||||
style={{ textDecoration: 'none' }}
|
||||
onClick={scrollToImagesSection}
|
||||
>
|
||||
<u>
|
||||
<em>
|
||||
<h4 style={{ display: 'inline' }}> 9. Images </h4>
|
||||
</em>
|
||||
</u>
|
||||
</a>
|
||||
<div style={{ display: "inline" }}> ci-dessous</div>
|
||||
<div style={{ display: "inline" }}>)</div>
|
||||
<div style={{ display: 'inline' }}> ci-dessous</div>
|
||||
<div style={{ display: 'inline' }}>)</div>
|
||||
<br />
|
||||
<em> - Cliquez sur un lien pour le copier</em>
|
||||
</div>
|
||||
<ul>
|
||||
{imageLinks.map((link, index) => {
|
||||
const imgTag = `} "texte de l'infobulle")`;
|
||||
const imgTag = `} "texte de l'infobulle")`;
|
||||
return (
|
||||
<li key={index}>
|
||||
<code
|
||||
onClick={() => handleCopyToClipboard(imgTag)}>
|
||||
<code onClick={() => handleCopyToClipboard(imgTag)}>
|
||||
{imgTag}
|
||||
</code>
|
||||
</li>
|
||||
|
|
@ -317,10 +354,9 @@ const QuizForm: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<GiftCheatSheet />
|
||||
|
||||
</div>
|
||||
|
||||
<div className='preview'>
|
||||
<div className="preview">
|
||||
<div className="preview-column">
|
||||
<h4>Prévisualisation</h4>
|
||||
<div>
|
||||
|
|
@ -328,7 +364,6 @@ const QuizForm: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{showScrollButton && (
|
||||
|
|
@ -356,7 +391,7 @@ const scrollToTopButtonStyle: CSSProperties = {
|
|||
backgroundColor: '#5271ff',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
zIndex: 1000,
|
||||
zIndex: 1000
|
||||
};
|
||||
|
||||
export default QuizForm;
|
||||
|
|
|
|||
|
|
@ -25,14 +25,14 @@ const ManageRoom: React.FC = () => {
|
|||
const navigate = useNavigate();
|
||||
const [socket, setSocket] = useState<Socket | null>(null);
|
||||
const [students, setStudents] = useState<StudentType[]>([]);
|
||||
const { quizId = '', roomName = '' } = useParams<{ quizId: string, roomName: string }>();
|
||||
const { quizId = '', roomName = '' } = useParams<{ quizId: string; roomName: string }>();
|
||||
const [quizQuestions, setQuizQuestions] = useState<QuestionType[] | undefined>();
|
||||
const [quiz, setQuiz] = useState<QuizType | null>(null);
|
||||
const [quizMode, setQuizMode] = useState<'teacher' | 'student'>('teacher');
|
||||
const [connectingError, setConnectingError] = useState<string>('');
|
||||
const [currentQuestion, setCurrentQuestion] = useState<QuestionType | undefined>(undefined);
|
||||
const [quizStarted, setQuizStarted] = useState<boolean>(false);
|
||||
const [formattedRoomName, setFormattedRoomName] = useState("");
|
||||
const [formattedRoomName, setFormattedRoomName] = useState('');
|
||||
const [newlyConnectedUser, setNewlyConnectedUser] = useState<StudentType | null>(null);
|
||||
|
||||
// Handle the newly connected user in useEffect, because it needs state info
|
||||
|
|
@ -179,7 +179,6 @@ const ManageRoom: React.FC = () => {
|
|||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if (socket) {
|
||||
console.log(`Listening for submit-answer-room in room ${formattedRoomName}`);
|
||||
socket.on('submit-answer-room', (answerData: AnswerReceptionFromBackendType) => {
|
||||
|
|
@ -253,10 +252,12 @@ const ManageRoom: React.FC = () => {
|
|||
if (nextQuestionIndex === undefined || nextQuestionIndex > quizQuestions.length - 1) return;
|
||||
|
||||
setCurrentQuestion(quizQuestions[nextQuestionIndex]);
|
||||
webSocketService.nextQuestion({roomName: formattedRoomName,
|
||||
webSocketService.nextQuestion({
|
||||
roomName: formattedRoomName,
|
||||
questions: quizQuestions,
|
||||
questionIndex: nextQuestionIndex,
|
||||
isLaunch: false});
|
||||
isLaunch: false
|
||||
});
|
||||
};
|
||||
|
||||
const previousQuestion = () => {
|
||||
|
|
@ -266,7 +267,12 @@ const ManageRoom: React.FC = () => {
|
|||
|
||||
if (prevQuestionIndex === undefined || prevQuestionIndex < 0) return;
|
||||
setCurrentQuestion(quizQuestions[prevQuestionIndex]);
|
||||
webSocketService.nextQuestion({roomName: formattedRoomName, questions: quizQuestions, questionIndex: prevQuestionIndex, isLaunch: false});
|
||||
webSocketService.nextQuestion({
|
||||
roomName: formattedRoomName,
|
||||
questions: quizQuestions,
|
||||
questionIndex: prevQuestionIndex,
|
||||
isLaunch: false
|
||||
});
|
||||
};
|
||||
|
||||
const initializeQuizQuestion = () => {
|
||||
|
|
@ -294,7 +300,12 @@ const ManageRoom: React.FC = () => {
|
|||
}
|
||||
|
||||
setCurrentQuestion(quizQuestions[0]);
|
||||
webSocketService.nextQuestion({roomName: formattedRoomName, questions: quizQuestions, questionIndex: 0, isLaunch: true});
|
||||
webSocketService.nextQuestion({
|
||||
roomName: formattedRoomName,
|
||||
questions: quizQuestions,
|
||||
questionIndex: 0,
|
||||
isLaunch: true
|
||||
});
|
||||
};
|
||||
|
||||
const launchStudentMode = () => {
|
||||
|
|
@ -331,7 +342,12 @@ const ManageRoom: React.FC = () => {
|
|||
if (quiz?.content && quizQuestions) {
|
||||
setCurrentQuestion(quizQuestions[questionIndex]);
|
||||
if (quizMode === 'teacher') {
|
||||
webSocketService.nextQuestion({roomName: formattedRoomName, questions: quizQuestions, questionIndex, isLaunch: false});
|
||||
webSocketService.nextQuestion({
|
||||
roomName: formattedRoomName,
|
||||
questions: quizQuestions,
|
||||
questionIndex,
|
||||
isLaunch: false
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -365,7 +381,6 @@ const ManageRoom: React.FC = () => {
|
|||
|
||||
return (
|
||||
<div className="room">
|
||||
<h1>Salle : {formattedRoomName}</h1>
|
||||
<div className="roomHeader">
|
||||
<DisconnectButton
|
||||
onReturn={handleReturn}
|
||||
|
|
@ -381,20 +396,37 @@ const ManageRoom: React.FC = () => {
|
|||
alignItems: 'center',
|
||||
width: '100%'
|
||||
}}
|
||||
>
|
||||
{(
|
||||
<div
|
||||
className="userCount subtitle smallText"
|
||||
style={{ display: "flex", justifyContent: "flex-end" }}
|
||||
>
|
||||
<GroupIcon style={{ marginRight: '5px' }} />
|
||||
{students.length}/60
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
></div>
|
||||
|
||||
<div className="dumb"></div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
marginBottom: '10px'
|
||||
}}
|
||||
>
|
||||
<h1 style={{ margin: 0, display: 'flex', alignItems: 'center' }}>
|
||||
Salle : {formattedRoomName}
|
||||
<div
|
||||
className="userCount subtitle"
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
fontSize: '1.5rem',
|
||||
fontWeight: 'bold',
|
||||
marginLeft: '20px',
|
||||
marginBottom: '0px'
|
||||
}}
|
||||
>
|
||||
<GroupIcon style={{ marginRight: '5px', verticalAlign: 'middle' }} />{' '}
|
||||
{students.length}/60
|
||||
</div>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* the following breaks the css (if 'room' classes are nested) */}
|
||||
<div className="">
|
||||
|
|
@ -425,7 +457,6 @@ const ManageRoom: React.FC = () => {
|
|||
<QuestionDisplay
|
||||
showAnswer={false}
|
||||
question={currentQuestion?.question as Question}
|
||||
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,26 +1,33 @@
|
|||
|
||||
.room .roomHeader {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-content: stretch
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
}
|
||||
.room .roomHeader .returnButton {
|
||||
flex-basis: 10%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.room .roomHeader .returnButton {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.room .roomHeader .centerTitle {
|
||||
flex-basis: auto;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.room .roomHeader .headerContent {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.room .roomHeader .dumb {
|
||||
|
|
@ -31,155 +38,11 @@
|
|||
width: 100%;
|
||||
height: 70vh;
|
||||
display: flex;
|
||||
|
||||
overflow: auto;
|
||||
justify-content: center;
|
||||
/* align-items: center; */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* .create-room-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
.room h1 {
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.manage-room-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.quiz-setup-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.quiz-mode-selection {
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
height: 15vh;
|
||||
}
|
||||
|
||||
.users-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
gap: 2vh;
|
||||
}
|
||||
|
||||
.launch-quiz-btn {
|
||||
width: 20vw;
|
||||
height: 11vh;
|
||||
margin-top: 2vh;
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.mode-choice {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 20vw;
|
||||
margin-top: 2vh;
|
||||
}
|
||||
|
||||
.user {
|
||||
background-color: #e7dad1;
|
||||
padding: 10px 20px;
|
||||
border: 1px solid black;
|
||||
border-radius: 10px;
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.bottom-btn {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
margin-top: 2vh;
|
||||
}
|
||||
|
||||
.room-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 60vw;
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 768px) {
|
||||
.room-container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.room-wrapper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.room-name-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
}
|
||||
.user-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.flex-column-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 85vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.preview-and-result-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nextQuestionButton {
|
||||
align-self: flex-end;
|
||||
margin-bottom: 5rem !important;
|
||||
}
|
||||
|
||||
.top-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-device-height: 4000px) {
|
||||
.flex-column-wrapper {
|
||||
height: 60vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-device-height: 1079px) {
|
||||
.flex-column-wrapper {
|
||||
height: 50vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-device-height: 741px) {
|
||||
.flex-column-wrapper {
|
||||
height: 40vh;
|
||||
}
|
||||
} */
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import { Button, NativeSelect } from '@mui/material';
|
|||
import ReturnButton from 'src/components/ReturnButton/ReturnButton';
|
||||
|
||||
import ApiService from '../../../services/ApiService';
|
||||
import SaveIcon from '@mui/icons-material/Save';
|
||||
|
||||
const Share: React.FC = () => {
|
||||
console.log('Component rendered');
|
||||
|
|
@ -119,6 +120,7 @@ const Share: React.FC = () => {
|
|||
</NativeSelect>
|
||||
|
||||
<Button variant="contained" onClick={handleQuizSave}>
|
||||
{<SaveIcon sx={{ fontSize: 20, marginRight: '8px' }} />}
|
||||
Enregistrer
|
||||
</Button>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue