mirror of
https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git
synced 2025-08-11 21:23:54 -04:00
using bootstrap
This commit is contained in:
Ana-Lucia Munteanu
parent
09955be8d4
commit
4bcae67f0e
26 changed files with 842 additions and 1501 deletions
|
|
@ -1,20 +1,32 @@
|
|||
import * as React from 'react';
|
||||
import './footer.css';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css'; // Add Bootstrap CSS import
|
||||
|
||||
type FooterProps = object; //empty object
|
||||
type FooterProps = object;
|
||||
|
||||
const Footer: React.FC<FooterProps> = () => {
|
||||
return (
|
||||
<div className="footer">
|
||||
<div className="footer-content">
|
||||
<footer className="py-4 mt-auto">
|
||||
<div className="container text-center">
|
||||
<div className="mb-2">
|
||||
Réalisé avec ❤ à Montréal par des finissant•e•s de l'ETS
|
||||
</div>
|
||||
<div className="footer-links">
|
||||
<a href="https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir/">GitHub</a>
|
||||
<span className="divider">|</span>
|
||||
<a href="https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir/wiki">Wiki GitHub</a>
|
||||
<div className="d-flex justify-content-center align-items-center">
|
||||
<a
|
||||
href="https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir/"
|
||||
className="text-dark text-decoration-none mx-2 hover-underline"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
<span className="text-muted mx-2">|</span>
|
||||
<a
|
||||
href="https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir/wiki"
|
||||
className="text-dark text-decoration-none mx-2 hover-underline"
|
||||
>
|
||||
Wiki GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
.footer {
|
||||
flex-shrink: 0;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: 0 10px;
|
||||
color: #666;
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
// GiftCheatSheet.tsx
|
||||
import React, { useState } from 'react';
|
||||
import './giftCheatSheet.css';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import FileCopyIcon from '@mui/icons-material/FileCopy';
|
||||
|
||||
const GiftCheatSheet: React.FC = () => {
|
||||
const [copySuccess, setCopySuccess] = useState(false);
|
||||
|
|
@ -8,195 +9,260 @@ const GiftCheatSheet: React.FC = () => {
|
|||
const copyToClipboard = (text: string) => {
|
||||
navigator.clipboard.writeText(text)
|
||||
.then(() => {
|
||||
setCopySuccess(true); // Afficher le message de succès
|
||||
console.log(copySuccess);
|
||||
// Masquer le message de succès après quelques secondes
|
||||
setCopySuccess(true);
|
||||
setTimeout(() => {
|
||||
setCopySuccess(false);
|
||||
}, 3000); // 3 secondes
|
||||
}, 3000);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Erreur lors de la copie dans le presse-papiers : ', error);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
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 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}";
|
||||
|
||||
return (
|
||||
<div className="gift-cheat-sheet">
|
||||
<h2 className="subtitle">Informations pratiques sur l'éditeur</h2>
|
||||
<span>
|
||||
<div className="container-fluid p-4 h-100">
|
||||
|
||||
{/* Add feedback alert at the top */}
|
||||
{copySuccess && (
|
||||
<div className="alert alert-success alert-dismissible fade show" role="alert">
|
||||
Texte copié dans le presse-papiers!
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
onClick={() => setCopySuccess(false)}
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<h2 className="text-dark mb-4">Informations pratiques sur l'éditeur</h2>
|
||||
<p className="mb-4">
|
||||
L'éditeur utilise le format GIFT (General Import Format Template) créé pour la
|
||||
plateforme Moodle afin de générer les mini-tests. Ci-dessous vous pouvez retrouver la
|
||||
syntaxe pour chaque type de question :
|
||||
</span>
|
||||
<div className="question-type">
|
||||
<h4>1. Questions Vrai/Faux</h4>
|
||||
<pre>
|
||||
<code className="selectable-text">
|
||||
</p>
|
||||
|
||||
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((section) => (
|
||||
<div key={section} className="mb-4">
|
||||
{section === 1 && (
|
||||
<>
|
||||
<h4 className="mt-3">1. Questions Vrai/Faux</h4>
|
||||
<pre className="bg-white p-3 border rounded">
|
||||
<code className="font-monospace">
|
||||
{QuestionVraiFaux}
|
||||
</code>
|
||||
|
||||
</pre>
|
||||
<button onClick={() => copyToClipboard(QuestionVraiFaux)}>Copier</button>
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-outline-primary btn-sm"
|
||||
onClick={() => copyToClipboard(QuestionVraiFaux)}
|
||||
>
|
||||
<FileCopyIcon style={{ fontSize: 18, marginRight: '5px' }} />
|
||||
Copier
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="question-type">
|
||||
<h4>2. Questions à choix multiple</h4>
|
||||
<pre>
|
||||
<code className="question-code-block selectable-text">
|
||||
{
|
||||
QuestionChoixMul
|
||||
}
|
||||
{section === 2 && (
|
||||
<>
|
||||
<h4 className="mt-3">2. Questions à choix multiple</h4>
|
||||
<pre className="bg-white p-3 border rounded">
|
||||
<code className="font-monospace">
|
||||
{QuestionChoixMul}
|
||||
</code>
|
||||
</pre>
|
||||
<button onClick={() => copyToClipboard(QuestionChoixMul)}>Copier</button>
|
||||
</div>
|
||||
<div className="question-type">
|
||||
<h4>3. Questions à choix multiple avec plusieurs réponses</h4>
|
||||
<pre>
|
||||
<code className="question-code-block selectable-text">
|
||||
{
|
||||
QuestionChoixMulMany
|
||||
}
|
||||
<button
|
||||
className="btn btn-outline-primary btn-sm"
|
||||
onClick={() => copyToClipboard(QuestionChoixMul)}
|
||||
>
|
||||
<FileCopyIcon style={{ fontSize: 18, marginRight: '5px' }} />
|
||||
Copier
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{section === 3 && (
|
||||
<>
|
||||
<h4 className="mt-3">3. Questions à choix multiple avec plusieurs réponses</h4>
|
||||
<pre className="bg-white p-3 border rounded">
|
||||
<code className="font-monospace">
|
||||
{QuestionChoixMulMany}
|
||||
</code>
|
||||
</pre>
|
||||
<button onClick={() => copyToClipboard(QuestionChoixMulMany)}>Copier</button>
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-outline-primary btn-sm"
|
||||
onClick={() => copyToClipboard(QuestionChoixMulMany)}
|
||||
>
|
||||
<FileCopyIcon style={{ fontSize: 18, marginRight: '5px' }} />
|
||||
Copier
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="question-type">
|
||||
<h4>4. Questions à réponse courte</h4>
|
||||
<pre>
|
||||
<code className="question-code-block selectable-text">
|
||||
{section === 4 && (
|
||||
<>
|
||||
<h4 className="mt-3">4. Questions à réponse courte</h4>
|
||||
<pre className="bg-white p-3 border rounded">
|
||||
<code className="font-monospace">
|
||||
{QuestionCourte}
|
||||
</code>
|
||||
</pre>
|
||||
<button onClick={() => copyToClipboard(QuestionCourte)}>Copier</button>
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-outline-primary btn-sm"
|
||||
onClick={() => copyToClipboard(QuestionCourte)}
|
||||
>
|
||||
<FileCopyIcon style={{ fontSize: 18, marginRight: '5px' }} />
|
||||
Copier
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="question-type">
|
||||
<h4> 5. Questions numériques </h4>
|
||||
<pre>
|
||||
<code className="question-code-block selectable-text">
|
||||
{
|
||||
QuestionNum
|
||||
}
|
||||
{section === 5 && (
|
||||
<>
|
||||
<h4 className="mt-3">5. Questions numériques</h4>
|
||||
<pre className="bg-white p-3 border rounded">
|
||||
<code className="font-monospace">
|
||||
{QuestionNum}
|
||||
</code>
|
||||
</pre>
|
||||
<button onClick={() => copyToClipboard(QuestionNum)}>Copier</button>
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-outline-primary btn-sm"
|
||||
onClick={() => copyToClipboard(QuestionNum)}
|
||||
>
|
||||
<FileCopyIcon style={{ fontSize: 18, marginRight: '5px' }} />
|
||||
Copier
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="question-type">
|
||||
<h4> 6. Paramètres optionnels </h4>
|
||||
<pre>
|
||||
<code className="question-code-block selectable-text">
|
||||
{section === 6 && (
|
||||
<>
|
||||
<h4 className="mt-3">6. Paramètres optionnels</h4>
|
||||
<pre className="bg-white p-3 border rounded">
|
||||
<code className="font-monospace">
|
||||
{'::Titre:: '}
|
||||
<span className="code-comment selectable-text">
|
||||
<span className="text-success">
|
||||
{' // Ajoute un titre à une question'}
|
||||
</span>
|
||||
<br />
|
||||
{'# Feedback '}
|
||||
<span className="code-comment selectable-text">
|
||||
<span className="text-success">
|
||||
{' // Feedback pour UNE réponse'}
|
||||
</span>
|
||||
<br />
|
||||
{'// Commentaire '}
|
||||
<span className="code-comment selectable-text">
|
||||
<span className="text-success">
|
||||
{' // Commentaire non apparent'}
|
||||
</span>
|
||||
<br />
|
||||
{'#### Feedback général '}
|
||||
<span className="code-comment selectable-text">
|
||||
<span className="text-success">
|
||||
{' // Feedback général pour une question'}
|
||||
</span>
|
||||
<br />
|
||||
{'%50% '}
|
||||
<span className="code-comment selectable-text">
|
||||
<span className="text-success">
|
||||
{" // Poids d'une réponse (peut être négatif)"}
|
||||
</span>
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="question-type">
|
||||
<h4> 7. Caractères spéciaux </h4>
|
||||
{section === 7 && (
|
||||
<>
|
||||
<h4 className="mt-3">7. Caractères spéciaux</h4>
|
||||
<p>
|
||||
Si vous souhaitez utiliser certains caractères spéciaux dans vos énoncés,
|
||||
réponses ou feedback, vous devez «échapper» ces derniers en ajoutant un \
|
||||
devant:
|
||||
</p>
|
||||
<pre>
|
||||
<code className="question-code-block selectable-text">
|
||||
<pre className="bg-white p-3 border rounded">
|
||||
<code className="font-monospace">
|
||||
{'\\~ \n\\= \n\\# \n\\{ \n\\} \n\\:'}
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="question-type">
|
||||
<h4> 8. LaTeX et Markdown</h4>
|
||||
{section === 8 && (
|
||||
<>
|
||||
<h4 className="mt-3">8. LaTeX et Markdown</h4>
|
||||
<p>
|
||||
Les formats LaTeX et Markdown sont supportés dans cette application. Vous devez cependant penser
|
||||
à «échapper» les caractères spéciaux mentionnés plus haut.
|
||||
</p>
|
||||
<p>Exemple d'équation:</p>
|
||||
<pre>
|
||||
<code className="question-code-block selectable-text">{'$$x\\= \\frac\\{y^2\\}\\{4\\}$$'}</code>
|
||||
<code className="question-code-block selectable-text">{'\n$x\\= \\frac\\{y^2\\}\\{4\\}$'}</code>
|
||||
<pre className="bg-white p-3 border rounded">
|
||||
<code className="font-monospace">{'$$x\\= \\frac\\{y^2\\}\\{4\\}$$'}</code>
|
||||
<code className="font-monospace">{'\n$x\\= \\frac\\{y^2\\}\\{4\\}$'}</code>
|
||||
</pre>
|
||||
<p>Exemple de texte Markdown:</p>
|
||||
<pre>
|
||||
<code className="question-code-block selectable-text">{'[markdown]Grâce à la balise markdown, Il est possible d\'insérer du texte *italique*, **gras**, du `code` et bien plus.'}</code>
|
||||
<pre className="bg-white p-3 border rounded">
|
||||
<code className="font-monospace">{'[markdown]Grâce à la balise markdown, Il est possible d\'insérer du texte *italique*, **gras**, du `code` et bien plus.'}</code>
|
||||
</pre>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="question-type" id="images-section">
|
||||
<h4> 9. Images </h4>
|
||||
{section === 9 && (
|
||||
<>
|
||||
<h4 className="mt-3">9. Images</h4>
|
||||
<p>Il est possible d'insérer une image dans une question, une réponse (choix multiple) et dans une rétroaction. D'abord, <strong>le format de l'élément doit être [markdown]</strong>. Ensuite utilisez la syntaxe suivante :</p>
|
||||
<pre>
|
||||
<code className="question-code-block">
|
||||
<pre className="bg-white p-3 border rounded">
|
||||
<code className="font-monospace">
|
||||
{'!['}
|
||||
<span className="code-comment">{`text alternatif`}</span>
|
||||
<span className="text-success">{`text alternatif`}</span>
|
||||
{']('}
|
||||
<span className="code-comment">{`URL-de-l'image`}</span>
|
||||
<span className="text-success">{`URL-de-l'image`}</span>
|
||||
{' "'}
|
||||
<span className="code-comment">{`texte de l'infobulle`}</span>
|
||||
<span className="text-success">{`texte de l'infobulle`}</span>
|
||||
{'")'}
|
||||
</code>
|
||||
</pre>
|
||||
<p>Exemple d'une question Vrai/Faux avec l'image d'un chat:</p>
|
||||
<pre>
|
||||
<code className="question-code-block">
|
||||
<pre className="bg-white p-3 border rounded">
|
||||
<code className="font-monospace">
|
||||
{'[markdown]Ceci est un chat: \n\n{T}'}
|
||||
</code>
|
||||
</pre>
|
||||
<p>Exemple d'une question à choix multiple avec l'image d'un chat dans une rétroaction :</p>
|
||||
<pre>
|
||||
<code className="question-code-block">
|
||||
<pre className="bg-white p-3 border rounded">
|
||||
<code className="font-monospace">
|
||||
{`[markdown]Qui a initié le développement d'ÉvalueTonSavoir {=ÉTS#OUI! 
|
||||
~EPFL#Non...}`}
|
||||
</code>
|
||||
</pre>
|
||||
<p>Note : les images étant spécifiées avec la syntaxe Markdown dans GIFT, on doit échapper les caractères spéciales (:) dans l'URL de l'image.</p>
|
||||
<p style={{ color: 'red' }}>
|
||||
<p className="text-danger">
|
||||
Attention: l'ancienne fonctionnalité avec les balises <code>{'<img>'}</code> n'est plus
|
||||
supportée.
|
||||
</p>
|
||||
</div>
|
||||
<div className="question-type">
|
||||
<h4> 10. Informations supplémentaires </h4>
|
||||
</>
|
||||
)}
|
||||
|
||||
{section === 10 && (
|
||||
<>
|
||||
<h4 className="mt-3">10. Informations supplémentaires</h4>
|
||||
<p>
|
||||
GIFT supporte d'autres formats de questions que nous ne gérons pas sur cette
|
||||
application.
|
||||
</p>
|
||||
<p>Vous pouvez retrouver la Documentation de GIFT (en anglais):</p>
|
||||
<a href="https://ethan-ou.github.io/vscode-gift-docs/docs/questions">
|
||||
<a
|
||||
href="https://ethan-ou.github.io/vscode-gift-docs/docs/questions"
|
||||
className="btn btn-link"
|
||||
>
|
||||
Documentation de GIFT
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
.gift-cheat-sheet {
|
||||
/* width: 30vw; */
|
||||
height: 100%;
|
||||
}
|
||||
.subtitle {
|
||||
color: #3a3a3a;
|
||||
margin-bottom: 2vh;
|
||||
}
|
||||
|
||||
.question-type {
|
||||
margin-bottom: 20;
|
||||
}
|
||||
.question-code-block,
|
||||
.code-comment {
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #ffffffbd;
|
||||
padding: 10px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 4px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.code-comment {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.question-type h4 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import * as React from 'react';
|
||||
import './header.css';
|
||||
import { Button } from '@mui/material';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import ExitToAppIcon from '@mui/icons-material/ExitToApp';
|
||||
|
||||
interface HeaderProps {
|
||||
isLoggedIn: boolean;
|
||||
|
|
@ -12,15 +13,16 @@ const Header: React.FC<HeaderProps> = ({ isLoggedIn, handleLogout }) => {
|
|||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="header">
|
||||
<header className="d-flex justify-content-between align-items-center p-3 bg-white shadow-sm">
|
||||
<img
|
||||
className="logo"
|
||||
src="/logo.png"
|
||||
alt="Logo"
|
||||
className="cursor-pointer"
|
||||
onClick={() => navigate('/')}
|
||||
/>
|
||||
|
||||
{isLoggedIn && (
|
||||
<div>
|
||||
{isLoggedIn ? (
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
|
|
@ -28,19 +30,20 @@ const Header: React.FC<HeaderProps> = ({ isLoggedIn, handleLogout }) => {
|
|||
handleLogout();
|
||||
navigate('/');
|
||||
}}
|
||||
className="ms-2"
|
||||
startIcon={<ExitToAppIcon />}
|
||||
>
|
||||
Logout
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{!isLoggedIn && (
|
||||
<div className="auth-selection-btn">
|
||||
<Link to="/login">
|
||||
<button className="auth-btn">Connexion</button>
|
||||
) : (
|
||||
<Link to="/login" className="text-decoration-none">
|
||||
<button className="btn btn-outline-primary ms-2">
|
||||
Connexion
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +0,0 @@
|
|||
|
||||
.header {
|
||||
flex-shrink: 0;
|
||||
padding: 15px;
|
||||
overflow: hidden;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header img {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -1,6 +1,4 @@
|
|||
import React, { useState, DragEvent, useRef, useEffect } from 'react';
|
||||
import './importModal.css';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
|
|
@ -12,7 +10,7 @@ import {
|
|||
} from '@mui/material';
|
||||
import { Clear, Download } from '@mui/icons-material';
|
||||
import ApiService from '../../services/ApiService';
|
||||
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
|
||||
type DroppedFile = {
|
||||
id: number;
|
||||
|
|
@ -48,7 +46,6 @@ const DragAndDrop: React.FC<Props> = ({ handleOnClose, handleOnImport, open, sel
|
|||
|
||||
const handleDrop = (e: DragEvent<HTMLDivElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
const files = e.dataTransfer.files;
|
||||
handleFiles(files);
|
||||
};
|
||||
|
|
@ -66,8 +63,6 @@ const DragAndDrop: React.FC<Props> = ({ handleOnClose, handleOnImport, open, sel
|
|||
setDroppedFiles((prevFiles) => [...prevFiles, ...newDroppedFiles]);
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handleOnSave = async () => {
|
||||
const storedQuizzes = JSON.parse(localStorage.getItem('quizzes') || '[]');
|
||||
const quizzesToImportPromises = droppedFiles.map((droppedFile) => {
|
||||
|
|
@ -77,23 +72,16 @@ const DragAndDrop: React.FC<Props> = ({ handleOnClose, handleOnImport, open, sel
|
|||
reader.onload = async (event) => {
|
||||
if (event.target && event.target.result) {
|
||||
const fileContent = event.target.result as string;
|
||||
//console.log(fileContent);
|
||||
if (fileContent.trim() === '') {
|
||||
resolve(null);
|
||||
}
|
||||
const questions = fileContent.split(/}/)
|
||||
.map(question => {
|
||||
// Remove trailing and leading spaces
|
||||
|
||||
return question.trim()+"}";
|
||||
return question.trim() + "}";
|
||||
})
|
||||
.filter(question => question.trim() !== '').slice(0, -1); // Filter out lines with only whitespace characters
|
||||
.filter(question => question.trim() !== '').slice(0, -1);
|
||||
|
||||
try {
|
||||
// const folders = await ApiService.getUserFolders();
|
||||
|
||||
// Assuming you want to use the first folder
|
||||
// const selectedFolder = folders.length > 0 ? folders[0]._id : null;
|
||||
await ApiService.createQuiz(droppedFile.name.slice(0, -4) || 'Untitled quiz', questions, selectedFolder);
|
||||
resolve('success');
|
||||
} catch (error) {
|
||||
|
|
@ -105,8 +93,6 @@ const DragAndDrop: React.FC<Props> = ({ handleOnClose, handleOnImport, open, sel
|
|||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
Promise.all(quizzesToImportPromises).then((quizzesToImport) => {
|
||||
const verifiedQuizzesToImport = quizzesToImport.filter((quiz) => {
|
||||
return quiz !== null;
|
||||
|
|
@ -118,17 +104,10 @@ const DragAndDrop: React.FC<Props> = ({ handleOnClose, handleOnImport, open, sel
|
|||
setDroppedFiles([]);
|
||||
handleOnImport();
|
||||
handleOnClose();
|
||||
|
||||
window.location.reload();
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const handleRemoveFile = (id: number) => {
|
||||
setDroppedFiles((prevFiles) => prevFiles.filter((file) => file.id !== id));
|
||||
};
|
||||
|
|
@ -158,14 +137,15 @@ const DragAndDrop: React.FC<Props> = ({ handleOnClose, handleOnImport, open, sel
|
|||
{'Importation de quiz'}
|
||||
</DialogTitle>
|
||||
<DialogContent
|
||||
className="import-container"
|
||||
className="border border-2 border-dashed border-secondary d-flex flex-column justify-content-center align-items-center p-4 mx-3 my-2"
|
||||
style={{ height: '20vh', cursor: 'pointer' }}
|
||||
onDragEnter={handleDragEnter}
|
||||
onDragOver={handleDragOver}
|
||||
onDrop={handleDrop}
|
||||
onClick={handleBrowseButtonClick}
|
||||
>
|
||||
<div className="mb-1">
|
||||
<DialogContentText sx={{ textAlign: 'center' }}>
|
||||
<div className="mb-2">
|
||||
<DialogContentText className="text-center">
|
||||
Déposer des fichiers ici ou
|
||||
<br />
|
||||
cliquez pour ouvrir l'explorateur des fichiers
|
||||
|
|
@ -175,7 +155,7 @@ const DragAndDrop: React.FC<Props> = ({ handleOnClose, handleOnImport, open, sel
|
|||
</DialogContent>
|
||||
<DialogContent>
|
||||
{droppedFiles.map((file) => (
|
||||
<div key={file.id + file.name} className="file-container">
|
||||
<div key={file.id + file.name} className="d-flex align-items-center gap-2 p-1">
|
||||
<span>{file.icon}</span>
|
||||
<span>{file.name}</span>
|
||||
<IconButton
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
.import-container {
|
||||
border-style: dashed;
|
||||
border-width: thin;
|
||||
border-color: rgba(128, 128, 128, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 20vh;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
margin: 0 20px 0 20px;
|
||||
}
|
||||
|
||||
.file-container {
|
||||
gap: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px;
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { CircularProgress } from '@mui/material';
|
||||
import React from 'react';
|
||||
import './loadingCircle.css';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
|
||||
interface Props {
|
||||
text: string;
|
||||
|
|
@ -8,8 +8,8 @@ interface Props {
|
|||
|
||||
const LoadingCircle: React.FC<Props> = ({ text }) => {
|
||||
return (
|
||||
<div className="loading-circle">
|
||||
<div className="text-base">{text}</div>
|
||||
<div className="d-flex flex-column align-items-center gap-2">
|
||||
<div className="fs-6">{text}</div>
|
||||
<CircularProgress />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
.loading-circle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
// StudentModeQuiz.tsx
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import QuestionComponent from '../QuestionsDisplay/QuestionDisplay';
|
||||
import '../../pages/Student/JoinRoom/joinRoom.css';
|
||||
import { QuestionType } from '../../Types/QuestionType';
|
||||
import { Button } from '@mui/material';
|
||||
//import QuestionNavigation from '../QuestionNavigation/QuestionNavigation';
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { Box, Button, Chip } from '@mui/material';
|
||||
import { StudentType } from '../../Types/StudentType';
|
||||
import { PlayArrow } from '@mui/icons-material';
|
||||
import LaunchQuizDialog from '../LaunchQuizDialog/LaunchQuizDialog';
|
||||
import { useState } from 'react';
|
||||
import './studentWaitPage.css';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
|
||||
interface Props {
|
||||
students: StudentType[];
|
||||
|
|
@ -20,31 +19,31 @@ const StudentWaitPage: React.FC<Props> = ({ students, launchQuiz, setQuizMode })
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="wait">
|
||||
<div className='button'>
|
||||
<div className="d-flex flex-column w-100">
|
||||
<div className="p-3 d-flex justify-content-center align-items-center">
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleLaunchClick}
|
||||
startIcon={<PlayArrow />}
|
||||
fullWidth
|
||||
sx={{ fontWeight: 600, fontSize: 20 }}
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
fontSize: 20,
|
||||
maxWidth: '500px' // Optional: limit button width
|
||||
}}
|
||||
>
|
||||
Lancer
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="students">
|
||||
|
||||
<div className="p-3 w-100 overflow-auto">
|
||||
<Box display="flex" flexWrap="wrap" gap={3}>
|
||||
|
||||
{students.map((student, index) => (
|
||||
<Box key={student.name + index} >
|
||||
<Box key={student.name + index}>
|
||||
<Chip label={student.name} sx={{ width: '100%' }} />
|
||||
</Box>
|
||||
))}
|
||||
|
||||
</Box>
|
||||
|
||||
</div>
|
||||
|
||||
<LaunchQuizDialog
|
||||
|
|
@ -53,7 +52,6 @@ const StudentWaitPage: React.FC<Props> = ({ students, launchQuiz, setQuizMode })
|
|||
launchQuiz={launchQuiz}
|
||||
setQuizMode={setQuizMode}
|
||||
/>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
.wait {
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.wait .button {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wait .students {
|
||||
width: 100%;
|
||||
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
// TeacherModeQuiz.tsx
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import QuestionComponent from '../QuestionsDisplay/QuestionDisplay';
|
||||
import '../../pages/Student/JoinRoom/joinRoom.css';
|
||||
import { QuestionType } from '../../Types/QuestionType';
|
||||
import DisconnectButton from 'src/components/DisconnectButton/DisconnectButton';
|
||||
import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
|
||||
|
|
|
|||
|
|
@ -1,21 +1,15 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
import { Socket } from 'socket.io-client';
|
||||
import { ENV_VARIABLES } from 'src/constants';
|
||||
|
||||
import StudentModeQuiz from 'src/components/StudentModeQuiz/StudentModeQuiz';
|
||||
import TeacherModeQuiz from 'src/components/TeacherModeQuiz/TeacherModeQuiz';
|
||||
import webSocketService, { AnswerSubmissionToBackendType } from '../../../services/WebsocketService';
|
||||
import DisconnectButton from 'src/components/DisconnectButton/DisconnectButton';
|
||||
|
||||
import './joinRoom.css';
|
||||
import { QuestionType } from '../../../Types/QuestionType';
|
||||
import { TextField } from '@mui/material';
|
||||
import LoadingButton from '@mui/lab/LoadingButton';
|
||||
|
||||
import LoginContainer from 'src/components/LoginContainer/LoginContainer'
|
||||
|
||||
import ApiService from '../../../services/ApiService'
|
||||
import { TextField, Button, CircularProgress } from '@mui/material';
|
||||
import LoginContainer from 'src/components/LoginContainer/LoginContainer';
|
||||
import ApiService from '../../../services/ApiService';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
|
||||
export type AnswerType = Array<string | number | boolean>;
|
||||
|
||||
|
|
@ -39,69 +33,63 @@ const JoinRoom: React.FC = () => {
|
|||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
console.log(`JoinRoom: useEffect: questions: ${JSON.stringify(questions)}`);
|
||||
setAnswers(questions ? Array(questions.length).fill({} as AnswerSubmissionToBackendType) : []);
|
||||
}, [questions]);
|
||||
|
||||
|
||||
const handleCreateSocket = () => {
|
||||
console.log(`JoinRoom: handleCreateSocket: ${ENV_VARIABLES.VITE_BACKEND_URL}`);
|
||||
const socket = webSocketService.connect(ENV_VARIABLES.VITE_BACKEND_URL);
|
||||
|
||||
socket.on('join-success', (roomJoinedName) => {
|
||||
socket.on('join-success', () => {
|
||||
setIsWaitingForTeacher(true);
|
||||
setIsConnecting(false);
|
||||
console.log(`on(join-success): Successfully joined the room ${roomJoinedName}`);
|
||||
});
|
||||
|
||||
socket.on('next-question', (question: QuestionType) => {
|
||||
console.log('JoinRoom: on(next-question): Received next-question:', question);
|
||||
setQuizMode('teacher');
|
||||
setIsWaitingForTeacher(false);
|
||||
setQuestion(question);
|
||||
});
|
||||
|
||||
socket.on('launch-teacher-mode', (questions: QuestionType[]) => {
|
||||
console.log('on(launch-teacher-mode): Received launch-teacher-mode:', questions);
|
||||
setQuizMode('teacher');
|
||||
setIsWaitingForTeacher(true);
|
||||
setQuestions([]); // clear out from last time (in case quiz is repeated)
|
||||
setQuestions([]);
|
||||
setQuestions(questions);
|
||||
// wait for next-question
|
||||
});
|
||||
socket.on('launch-student-mode', (questions: QuestionType[]) => {
|
||||
console.log('on(launch-student-mode): Received launch-student-mode:', questions);
|
||||
|
||||
socket.on('launch-student-mode', (questions: QuestionType[]) => {
|
||||
setQuizMode('student');
|
||||
setIsWaitingForTeacher(false);
|
||||
setQuestions([]); // clear out from last time (in case quiz is repeated)
|
||||
setQuestions([]);
|
||||
setQuestions(questions);
|
||||
setQuestion(questions[0]);
|
||||
});
|
||||
|
||||
socket.on('end-quiz', () => {
|
||||
disconnect();
|
||||
});
|
||||
|
||||
socket.on('join-failure', (message) => {
|
||||
console.log('Failed to join the room.');
|
||||
setConnectionError(`Erreur de connexion : ${message}`);
|
||||
setIsConnecting(false);
|
||||
});
|
||||
|
||||
socket.on('connect_error', (error) => {
|
||||
switch (error.message) {
|
||||
case 'timeout':
|
||||
setConnectionError("JoinRoom: timeout: Le serveur n'est pas disponible");
|
||||
setConnectionError("Le serveur n'est pas disponible");
|
||||
break;
|
||||
case 'websocket error':
|
||||
setConnectionError("JoinRoom: websocket error: Le serveur n'est pas disponible");
|
||||
setConnectionError("Le serveur n'est pas disponible");
|
||||
break;
|
||||
}
|
||||
setIsConnecting(false);
|
||||
console.log('Connection Error:', error.message);
|
||||
});
|
||||
|
||||
setSocket(socket);
|
||||
};
|
||||
|
||||
const disconnect = () => {
|
||||
// localStorage.clear();
|
||||
webSocketService.disconnect();
|
||||
setSocket(null);
|
||||
setQuestion(undefined);
|
||||
|
|
@ -120,28 +108,22 @@ const JoinRoom: React.FC = () => {
|
|||
}
|
||||
|
||||
if (username && roomName) {
|
||||
console.log(`Tentative de rejoindre : ${roomName}, utilisateur : ${username}`);
|
||||
|
||||
webSocketService.joinRoom(roomName, username);
|
||||
}
|
||||
};
|
||||
|
||||
const handleOnSubmitAnswer = (answer: AnswerType, idQuestion: number) => {
|
||||
console.info(`JoinRoom: handleOnSubmitAnswer: answer: ${answer}, idQuestion: ${idQuestion}`);
|
||||
const answerData: AnswerSubmissionToBackendType = {
|
||||
roomName: roomName,
|
||||
answer: answer,
|
||||
username: username,
|
||||
idQuestion: idQuestion
|
||||
};
|
||||
// localStorage.setItem(`Answer${idQuestion}`, JSON.stringify(answer));
|
||||
setAnswers((prevAnswers) => {
|
||||
console.log(`JoinRoom: handleOnSubmitAnswer: prevAnswers: ${JSON.stringify(prevAnswers)}`);
|
||||
const newAnswers = [...prevAnswers]; // Create a copy of the previous answers array
|
||||
newAnswers[idQuestion - 1] = answerData; // Update the specific answer
|
||||
return newAnswers; // Return the new array
|
||||
const newAnswers = [...prevAnswers];
|
||||
newAnswers[idQuestion - 1] = answerData;
|
||||
return newAnswers;
|
||||
});
|
||||
console.log(`JoinRoom: handleOnSubmitAnswer: answers: ${JSON.stringify(answers)}`);
|
||||
webSocketService.submitAnswer(answerData);
|
||||
};
|
||||
|
||||
|
|
@ -153,22 +135,20 @@ const JoinRoom: React.FC = () => {
|
|||
|
||||
if (isWaitingForTeacher) {
|
||||
return (
|
||||
<div className='room'>
|
||||
<div className='roomHeader'>
|
||||
|
||||
<div className="d-flex flex-column vh-100">
|
||||
<div className="d-flex justify-content-between align-items-center p-3 border-bottom">
|
||||
<DisconnectButton
|
||||
onReturn={disconnect}
|
||||
message={`Êtes-vous sûr de vouloir quitter?`} />
|
||||
|
||||
<div className='centerTitle'>
|
||||
<div className='title'>Salle: {roomName}</div>
|
||||
<div className='userCount subtitle'>
|
||||
<div className="text-center">
|
||||
<h2 className="mb-1">Salle: {roomName}</h2>
|
||||
<p className="text-muted mb-0">
|
||||
En attente que le professeur lance le questionnaire...
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='dumb'></div>
|
||||
|
||||
<div style={{ width: '48px' }}></div> {/* Spacer for balance */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -197,41 +177,39 @@ const JoinRoom: React.FC = () => {
|
|||
);
|
||||
default:
|
||||
return (
|
||||
<LoginContainer
|
||||
title='Rejoindre une salle'
|
||||
error={connectionError}>
|
||||
|
||||
<LoginContainer title='Rejoindre une salle' error={connectionError}>
|
||||
<TextField
|
||||
type="text"
|
||||
label="Nom de la salle"
|
||||
variant="outlined"
|
||||
className="mb-3 w-100"
|
||||
value={roomName}
|
||||
onChange={(e) => setRoomName(e.target.value.toUpperCase())}
|
||||
placeholder="Nom de la salle"
|
||||
sx={{ marginBottom: '1rem' }}
|
||||
fullWidth={true}
|
||||
fullWidth
|
||||
onKeyDown={handleReturnKey}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
label="Nom d'utilisateur"
|
||||
variant="outlined"
|
||||
className="mb-3 w-100"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="Nom d'utilisateur"
|
||||
sx={{ marginBottom: '1rem' }}
|
||||
fullWidth={true}
|
||||
fullWidth
|
||||
onKeyDown={handleReturnKey}
|
||||
/>
|
||||
|
||||
<LoadingButton
|
||||
loading={isConnecting}
|
||||
onClick={handleSocket}
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{ marginBottom: `${connectionError && '2rem'}` }}
|
||||
disabled={!username || !roomName}
|
||||
>Rejoindre</LoadingButton>
|
||||
|
||||
className="w-100"
|
||||
onClick={handleSocket}
|
||||
disabled={!username || !roomName || isConnecting}
|
||||
startIcon={isConnecting ? <CircularProgress size={20} /> : null}
|
||||
>
|
||||
Rejoindre
|
||||
</Button>
|
||||
</LoginContainer>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,50 +0,0 @@
|
|||
|
||||
|
||||
/* .join-room-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
height: 85%;
|
||||
}
|
||||
|
||||
.waiting-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 2rem 4rem 2rem 4rem;
|
||||
width: 25vw;
|
||||
}
|
||||
|
||||
.login-avatar {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.question-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.question-component-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 768px) {
|
||||
.login-container {
|
||||
width: inherit;
|
||||
}
|
||||
} */
|
||||
|
|
@ -1,19 +1,12 @@
|
|||
// Dashboard.tsx
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import { parse } from 'gift-pegjs';
|
||||
|
||||
import Template from 'src/components/GiftTemplate/templates';
|
||||
import { QuizType } from '../../../Types/QuizType';
|
||||
import { FolderType } from '../../../Types/FolderType';
|
||||
// import { QuestionService } from '../../../services/QuestionService';
|
||||
import ApiService from '../../../services/ApiService';
|
||||
|
||||
import './dashboard.css';
|
||||
import ImportModal from 'src/components/ImportModal/ImportModal';
|
||||
//import axios from 'axios';
|
||||
import { RoomType } from 'src/Types/RoomType';
|
||||
// import { useRooms } from '../ManageRoom/RoomContext';
|
||||
import {
|
||||
Dialog,
|
||||
DialogActions,
|
||||
|
|
@ -40,17 +33,31 @@ import {
|
|||
ContentCopy,
|
||||
Edit,
|
||||
Share
|
||||
// DriveFileMove
|
||||
} from '@mui/icons-material';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
|
||||
// Create a custom-styled Card component
|
||||
const CustomCard = styled(Card)({
|
||||
overflow: 'visible', // Override the overflow property
|
||||
const CustomCard = styled(Card)(({ theme }) => ({
|
||||
overflow: 'visible',
|
||||
position: 'relative',
|
||||
margin: '40px 0 20px 0', // Add top margin to make space for the tab
|
||||
margin: '40px 0 20px 0',
|
||||
borderRadius: '8px',
|
||||
paddingTop: '20px' // Ensure content inside the card doesn't overlap with the tab
|
||||
});
|
||||
paddingTop: '20px',
|
||||
border: `2px solid ${theme.palette.divider}`,
|
||||
'& .folder-tab': {
|
||||
position: 'absolute',
|
||||
top: '-33px',
|
||||
left: '9px',
|
||||
padding: '5px 10px',
|
||||
borderRadius: '8px 8px 0 0',
|
||||
fontWeight: 'bold',
|
||||
whiteSpace: 'nowrap',
|
||||
display: 'inline-block',
|
||||
border: `2px solid ${theme.palette.divider}`,
|
||||
borderBottom: 'none',
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
color: theme.palette.primary.main
|
||||
}
|
||||
}));
|
||||
|
||||
const Dashboard: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
|
|
@ -58,19 +65,14 @@ const Dashboard: React.FC = () => {
|
|||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [showImportModal, setShowImportModal] = useState<boolean>(false);
|
||||
const [folders, setFolders] = useState<FolderType[]>([]);
|
||||
const [selectedFolderId, setSelectedFolderId] = useState<string>(''); // Selected folder
|
||||
const [selectedFolderId, setSelectedFolderId] = useState<string>('');
|
||||
const [rooms, setRooms] = useState<RoomType[]>([]);
|
||||
const [openAddRoomDialog, setOpenAddRoomDialog] = useState(false);
|
||||
const [newRoomTitle, setNewRoomTitle] = useState('');
|
||||
// const { selectedRoom, selectRoom, createRoom } = useRooms();
|
||||
const [selectedRoom, selectRoom] = useState<RoomType>(); // menu
|
||||
const [selectedRoom, selectRoom] = useState<RoomType>();
|
||||
const [errorMessage, setErrorMessage] = useState('');
|
||||
const [showErrorDialog, setShowErrorDialog] = useState(false);
|
||||
|
||||
// Filter quizzes based on search term
|
||||
// const filteredQuizzes = quizzes.filter(quiz =>
|
||||
// quiz.title.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
// );
|
||||
const filteredQuizzes = useMemo(() => {
|
||||
return quizzes.filter(
|
||||
(quiz) =>
|
||||
|
|
@ -78,7 +80,6 @@ const Dashboard: React.FC = () => {
|
|||
);
|
||||
}, [quizzes, searchTerm]);
|
||||
|
||||
// Group quizzes by folder
|
||||
const quizzesByFolder = filteredQuizzes.reduce((acc, quiz) => {
|
||||
if (!acc[quiz.folderName]) {
|
||||
acc[quiz.folderName] = [];
|
||||
|
|
@ -90,28 +91,18 @@ const Dashboard: React.FC = () => {
|
|||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
const isLoggedIn = await ApiService.isLoggedIn();
|
||||
console.log(`Dashboard: isLoggedIn: ${isLoggedIn}`);
|
||||
if (!isLoggedIn) {
|
||||
navigate('/teacher/login');
|
||||
return;
|
||||
} else {
|
||||
const userRooms = await ApiService.getUserRooms();
|
||||
setRooms(userRooms as RoomType[]);
|
||||
|
||||
const userFolders = await ApiService.getUserFolders();
|
||||
setFolders(userFolders as FolderType[]);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (rooms.length > 0 && !selectedRoom) {
|
||||
selectRoom(rooms[rooms.length - 1]);
|
||||
localStorage.setItem('selectedRoomId', rooms[rooms.length - 1]._id);
|
||||
}
|
||||
}, [rooms, selectedRoom]);
|
||||
}, [navigate]);
|
||||
|
||||
const handleSelectRoom = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
if (event.target.value === 'add-room') {
|
||||
|
|
@ -424,15 +415,20 @@ const Dashboard: React.FC = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="dashboard">
|
||||
<div className="title">Tableau de bord</div>
|
||||
<div className="container-fluid py-4">
|
||||
<h1 className="mb-4">Tableau de bord</h1>
|
||||
|
||||
<div className="roomSelection">
|
||||
<label htmlFor="select-room">Sélectionner une salle: </label>
|
||||
<select value={selectedRoom?._id || ''} onChange={(e) => handleSelectRoom(e)}>
|
||||
<option value="" disabled>
|
||||
-- Sélectionner une salle --
|
||||
</option>
|
||||
{/* Room Selection */}
|
||||
<div className="row mb-4">
|
||||
<div className="col-md-6">
|
||||
<div className="d-flex align-items-center">
|
||||
<label htmlFor="select-room" className="me-2 fw-medium">Sélectionner une salle:</label>
|
||||
<select
|
||||
className="form-select flex-grow-1"
|
||||
value={selectedRoom?._id || ''}
|
||||
onChange={(e) => handleSelectRoom(e)}
|
||||
>
|
||||
<option value="" disabled>-- Sélectionner une salle --</option>
|
||||
{rooms.map((room) => (
|
||||
<option key={room._id} value={room._id}>
|
||||
{room.title}
|
||||
|
|
@ -440,15 +436,17 @@ const Dashboard: React.FC = () => {
|
|||
))}
|
||||
<option value="add-room">Ajouter salle</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedRoom && (
|
||||
<div className="roomTitle">
|
||||
<div className="mb-4">
|
||||
<h2>Salle sélectionnée: {selectedRoom.title}</h2>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Dialogs */}
|
||||
<Dialog open={openAddRoomDialog} onClose={() => setOpenAddRoomDialog(false)}>
|
||||
<DialogTitle>Créer une nouvelle salle</DialogTitle>
|
||||
<DialogContent>
|
||||
|
|
@ -463,6 +461,7 @@ const Dashboard: React.FC = () => {
|
|||
<Button onClick={handleCreateRoom}>Créer</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
<Dialog open={showErrorDialog} onClose={() => setShowErrorDialog(false)}>
|
||||
<DialogTitle>Erreur</DialogTitle>
|
||||
<DialogContent>
|
||||
|
|
@ -473,12 +472,15 @@ const Dashboard: React.FC = () => {
|
|||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
<div className="search-bar">
|
||||
{/* Search Bar */}
|
||||
<div className="row mb-4">
|
||||
<div className="col-12">
|
||||
<TextField
|
||||
onChange={handleSearch}
|
||||
value={searchTerm}
|
||||
placeholder="Rechercher un quiz par son titre"
|
||||
fullWidth
|
||||
className="w-100"
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
|
|
@ -490,167 +492,158 @@ const Dashboard: React.FC = () => {
|
|||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="folder">
|
||||
<div className="select">
|
||||
{/* Folder Selection and Actions */}
|
||||
<div className="row mb-4 align-items-center">
|
||||
<div className="col-md-8 col-lg-9 mb-2 mb-md-0">
|
||||
<NativeSelect
|
||||
id="select-folder"
|
||||
color="primary"
|
||||
value={selectedFolderId}
|
||||
onChange={handleSelectFolder}
|
||||
className="w-100"
|
||||
fullWidth
|
||||
>
|
||||
<option value=""> Tous les dossiers... </option>
|
||||
|
||||
<option value="">Tous les dossiers...</option>
|
||||
{folders.map((folder: FolderType) => (
|
||||
<option value={folder._id} key={folder._id}>
|
||||
{' '}
|
||||
{folder.title}{' '}
|
||||
{folder.title}
|
||||
</option>
|
||||
))}
|
||||
</NativeSelect>
|
||||
</div>
|
||||
|
||||
<div className="actions">
|
||||
<Tooltip title="Ajouter dossier" placement="top">
|
||||
<IconButton color="primary" onClick={handleCreateFolder}>
|
||||
{' '}
|
||||
<Add />{' '}
|
||||
<div className="col-md-4 col-lg-3">
|
||||
<div className="d-flex justify-content-end gap-2">
|
||||
<Tooltip title="Ajouter dossier">
|
||||
<IconButton color="primary" onClick={handleCreateFolder} className="border">
|
||||
<Add />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Renommer dossier" placement="top">
|
||||
<div>
|
||||
<Tooltip title="Renommer dossier">
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={handleRenameFolder}
|
||||
disabled={selectedFolderId == ''} // cannot action on all
|
||||
disabled={selectedFolderId === ''}
|
||||
className="border"
|
||||
>
|
||||
{' '}
|
||||
<Edit />{' '}
|
||||
<Edit />
|
||||
</IconButton>
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Dupliquer dossier" placement="top">
|
||||
<div>
|
||||
<Tooltip title="Dupliquer dossier">
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={handleDuplicateFolder}
|
||||
disabled={selectedFolderId == ''} // cannot action on all
|
||||
disabled={selectedFolderId === ''}
|
||||
className="border"
|
||||
>
|
||||
{' '}
|
||||
<FolderCopy />{' '}
|
||||
<FolderCopy />
|
||||
</IconButton>
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Supprimer dossier" placement="top">
|
||||
<div>
|
||||
<Tooltip title="Supprimer dossier">
|
||||
<IconButton
|
||||
aria-label="delete"
|
||||
color="primary"
|
||||
color="error"
|
||||
onClick={handleDeleteFolder}
|
||||
disabled={selectedFolderId == ''} // cannot action on all
|
||||
disabled={selectedFolderId === ''}
|
||||
className="border"
|
||||
>
|
||||
{' '}
|
||||
<DeleteOutline />{' '}
|
||||
<DeleteOutline />
|
||||
</IconButton>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ajouter">
|
||||
{/* Add Quiz and Import Buttons */}
|
||||
<div className="row mb-4 g-2">
|
||||
<div className="col-md-10">
|
||||
<Button
|
||||
variant="outlined"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
startIcon={<Add />}
|
||||
onClick={handleCreateQuiz}
|
||||
className="w-100 py-2"
|
||||
>
|
||||
Ajouter un nouveau quiz
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
<div className="col-md-2">
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
startIcon={<Upload />}
|
||||
onClick={handleOnImport}
|
||||
className="w-100 py-2"
|
||||
>
|
||||
Import
|
||||
Importer
|
||||
</Button>
|
||||
</div>
|
||||
<div className="list">
|
||||
</div>
|
||||
|
||||
{/* Quiz List */}
|
||||
<div className="row">
|
||||
{Object.keys(quizzesByFolder).map((folderName) => (
|
||||
<CustomCard key={folderName} className="folder-card">
|
||||
<div className="col-12 mb-4" key={folderName}>
|
||||
<CustomCard>
|
||||
<div className="folder-tab">{folderName}</div>
|
||||
<CardContent>
|
||||
<CardContent className="p-3">
|
||||
{quizzesByFolder[folderName].map((quiz: QuizType) => (
|
||||
<div className="quiz" key={quiz._id}>
|
||||
<div className="title">
|
||||
<Tooltip title="Lancer quiz" placement="top">
|
||||
<div>
|
||||
<div className="d-flex align-items-center mb-3 p-2 bg-light rounded" key={quiz._id}>
|
||||
<div className="flex-grow-1 me-3 text-truncate">
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={() => handleLancerQuiz(quiz)}
|
||||
disabled={!validateQuiz(quiz.content)}
|
||||
className="w-100 text-truncate text-start py-2"
|
||||
>
|
||||
{`${quiz.title} (${quiz.content.length} question${
|
||||
quiz.content.length > 1 ? 's' : ''
|
||||
{`${quiz.title} (${quiz.content.length} question${quiz.content.length > 1 ? 's' : ''
|
||||
})`}
|
||||
</Button>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div className="actions">
|
||||
<Tooltip title="Télécharger quiz" placement="top">
|
||||
<div className="d-flex gap-1">
|
||||
<Tooltip title="Télécharger quiz">
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => downloadTxtFile(quiz)}
|
||||
className="border"
|
||||
>
|
||||
{' '}
|
||||
<FileDownload />{' '}
|
||||
<FileDownload />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Modifier quiz" placement="top">
|
||||
<Tooltip title="Modifier quiz">
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => handleEditQuiz(quiz)}
|
||||
className="border"
|
||||
>
|
||||
{' '}
|
||||
<Edit />{' '}
|
||||
<Edit />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Dupliquer quiz" placement="top">
|
||||
<Tooltip title="Dupliquer quiz">
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => handleDuplicateQuiz(quiz)}
|
||||
className="border"
|
||||
>
|
||||
{' '}
|
||||
<ContentCopy />{' '}
|
||||
<ContentCopy />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Supprimer quiz" placement="top">
|
||||
<Tooltip title="Supprimer quiz">
|
||||
<IconButton
|
||||
aria-label="delete"
|
||||
color="primary"
|
||||
color="error"
|
||||
onClick={() => handleRemoveQuiz(quiz)}
|
||||
className="border"
|
||||
>
|
||||
{' '}
|
||||
<DeleteOutline />{' '}
|
||||
<DeleteOutline />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Partager quiz" placement="top">
|
||||
<Tooltip title="Partager quiz">
|
||||
<IconButton
|
||||
color="primary"
|
||||
onClick={() => handleShareQuiz(quiz)}
|
||||
className="border"
|
||||
>
|
||||
{' '}
|
||||
<Share />{' '}
|
||||
<Share />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
|
@ -658,8 +651,10 @@ const Dashboard: React.FC = () => {
|
|||
))}
|
||||
</CardContent>
|
||||
</CustomCard>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<ImportModal
|
||||
open={showImportModal}
|
||||
handleOnClose={() => setShowImportModal(false)}
|
||||
|
|
@ -670,11 +665,13 @@ const Dashboard: React.FC = () => {
|
|||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
// Helper function
|
||||
function addFolderTitleToQuizzes(folderQuizzes: string | QuizType[], folderName: string) {
|
||||
if (Array.isArray(folderQuizzes))
|
||||
if (Array.isArray(folderQuizzes)) {
|
||||
folderQuizzes.forEach((quiz) => {
|
||||
quiz.folderName = folderName;
|
||||
console.log(`quiz: ${quiz.title} folder: ${quiz.folderName}`);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default Dashboard;
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
.dashboard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
gap: 30px;
|
||||
|
||||
}
|
||||
|
||||
.dashboard .folder {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.dashboard .folder .select {
|
||||
flex-grow: 8;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Select the selector to make it 100% width */
|
||||
div:has(> #select-folder) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dashboard .folder .actions {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dashboard .ajouter {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.dashboard .ajouter button:first-child {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dashboard .list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dashboard .list .quiz {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
margin-bottom: 10px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.dashboard .list .quiz .title {
|
||||
flex-grow: 8;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
/* reset title css */
|
||||
font-size: large;
|
||||
margin: 0;
|
||||
font-weight: 100;
|
||||
overflow: hidden;
|
||||
}
|
||||
.dashboard .list .quiz .title button {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.dashboard .list .quiz .actions {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dashboard .list .quiz .actions {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.folder-card {
|
||||
position: relative;
|
||||
/* margin: 40px 0 20px 0; /* Add top margin to make space for the tab */
|
||||
border-radius: 8px;
|
||||
color: #f9f9f9;
|
||||
--outline-color: #e1e1e1;
|
||||
border: 2px solid var(--outline-color);
|
||||
}
|
||||
|
||||
.folder-tab {
|
||||
position: absolute;
|
||||
top: -33px;
|
||||
left: 9px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
font-weight: bold;
|
||||
white-space: nowrap; /* Prevent text from wrapping */
|
||||
display: inline-block; /* Ensure the tab width is based on content */
|
||||
border: 2px solid var(--outline-color);
|
||||
border-bottom-style: none;
|
||||
background-color: white; /* Optional: background color to match the card */
|
||||
color: #3f51b5; /* Text color to match the outline */
|
||||
}
|
||||
|
||||
/* .folder-card:nth-child(odd) {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.folder-card:nth-child(even) {
|
||||
background-color: #e0e0e0;
|
||||
} */
|
||||
|
|
@ -1,22 +1,16 @@
|
|||
// EditorQuiz.tsx
|
||||
import React, { useState, useEffect, useRef, CSSProperties } from 'react';
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
|
||||
import { FolderType } from '../../../Types/FolderType';
|
||||
|
||||
import Editor from 'src/components/Editor/Editor';
|
||||
import GiftCheatSheet from 'src/components/GIFTCheatSheet/GiftCheatSheet';
|
||||
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 ReturnButton from 'src/components/ReturnButton/ReturnButton';
|
||||
|
||||
import ApiService from '../../../services/ApiService';
|
||||
import { escapeForGIFT } from '../../../utils/giftUtils';
|
||||
import { Upload } from '@mui/icons-material';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
|
||||
interface EditQuizParams {
|
||||
id: string;
|
||||
|
|
@ -27,7 +21,6 @@ const QuizForm: React.FC = () => {
|
|||
const [quizTitle, setQuizTitle] = useState('');
|
||||
const [selectedFolder, setSelectedFolder] = useState<string>('');
|
||||
const [filteredValue, setFilteredValue] = useState<string[]>([]);
|
||||
|
||||
const { id } = useParams<EditQuizParams>();
|
||||
const [value, setValue] = useState('');
|
||||
const [isNewQuiz, setNewQuiz] = useState(false);
|
||||
|
|
@ -35,9 +28,6 @@ const QuizForm: React.FC = () => {
|
|||
const navigate = useNavigate();
|
||||
const [folders, setFolders] = useState<FolderType[]>([]);
|
||||
const [imageLinks, setImageLinks] = useState<string[]>([]);
|
||||
const handleSelectFolder = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
setSelectedFolder(event.target.value);
|
||||
};
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [showScrollButton, setShowScrollButton] = useState(false);
|
||||
|
|
@ -48,25 +38,15 @@ const QuizForm: React.FC = () => {
|
|||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
if (window.scrollY > 300) {
|
||||
setShowScrollButton(true);
|
||||
} else {
|
||||
setShowScrollButton(false);
|
||||
}
|
||||
setShowScrollButton(window.scrollY > 300);
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => {
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
};
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
const scrollToImagesSection = (event: { preventDefault: () => void; }) => {
|
||||
event.preventDefault();
|
||||
const section = document.getElementById('images-section');
|
||||
if (section) {
|
||||
section.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
document.getElementById('images-section')?.scrollIntoView({ behavior: 'smooth' });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -74,7 +54,6 @@ const QuizForm: React.FC = () => {
|
|||
const userFolders = await ApiService.getUserFolders();
|
||||
setFolders(userFolders as FolderType[]);
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
|
|
@ -87,116 +66,83 @@ const QuizForm: React.FC = () => {
|
|||
}
|
||||
|
||||
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`)
|
||||
console.error('Quiz not found for id:', id);
|
||||
window.alert(`Une erreur est survenue.\n Le quiz ${id} n'a pas été trouvé\nVeuillez réessayer plus tard`);
|
||||
navigate('/teacher/dashboard');
|
||||
return;
|
||||
}
|
||||
|
||||
setQuiz(quiz as QuizType);
|
||||
const { title, content, folderId } = quiz;
|
||||
|
||||
setQuizTitle(title);
|
||||
setSelectedFolder(folderId);
|
||||
setFilteredValue(content);
|
||||
setQuiz(quiz);
|
||||
setQuizTitle(quiz.title);
|
||||
setSelectedFolder(quiz.folderId);
|
||||
setFilteredValue(quiz.content);
|
||||
setValue(quiz.content.join('\n\n'));
|
||||
|
||||
} catch (error) {
|
||||
window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`)
|
||||
console.error('Error fetching quiz:', error);
|
||||
window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`);
|
||||
navigate('/teacher/dashboard');
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [id]);
|
||||
}, [id, navigate]);
|
||||
|
||||
function handleUpdatePreview(value: string) {
|
||||
if (value !== '') {
|
||||
setValue(value);
|
||||
}
|
||||
|
||||
// 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 handleQuizTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setQuizTitle(event.target.value);
|
||||
};
|
||||
|
||||
const handleSelectFolder = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
setSelectedFolder(event.target.value);
|
||||
};
|
||||
|
||||
const handleQuizSave = async () => {
|
||||
try {
|
||||
// check if everything is there
|
||||
if (quizTitle == '') {
|
||||
if (quizTitle === '') {
|
||||
alert("Veuillez choisir un titre");
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedFolder == '') {
|
||||
if (selectedFolder === '') {
|
||||
alert("Veuillez choisir un dossier");
|
||||
return;
|
||||
}
|
||||
|
||||
if (isNewQuiz) {
|
||||
await ApiService.createQuiz(quizTitle, filteredValue, selectedFolder);
|
||||
} else {
|
||||
if (quiz) {
|
||||
} else if (quiz) {
|
||||
await ApiService.updateQuiz(quiz._id, quizTitle, filteredValue);
|
||||
}
|
||||
}
|
||||
|
||||
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`);
|
||||
}
|
||||
};
|
||||
|
||||
// I do not know what this does but do not remove
|
||||
if (!isNewQuiz && !quiz) {
|
||||
return <div>Chargement...</div>;
|
||||
}
|
||||
|
||||
const handleSaveImage = async () => {
|
||||
try {
|
||||
const inputElement = document.getElementById('file-input') as HTMLInputElement;
|
||||
|
||||
if (!inputElement?.files || inputElement.files.length === 0) {
|
||||
setDialogOpen(true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!inputElement.files || inputElement.files.length === 0) {
|
||||
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]);
|
||||
|
||||
// Reset the file input element
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = '';
|
||||
}
|
||||
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.`);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -204,22 +150,27 @@ const QuizForm: React.FC = () => {
|
|||
navigator.clipboard.writeText(link);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='quizEditor'>
|
||||
if (!isNewQuiz && !quiz) {
|
||||
return <div>Chargement...</div>;
|
||||
}
|
||||
|
||||
<div className='editHeader'>
|
||||
return (
|
||||
<div className="container-fluid p-4">
|
||||
{/* Header */}
|
||||
<div className="d-flex justify-content-between align-items-center mb-4">
|
||||
<div className="w-25">
|
||||
<ReturnButton
|
||||
askConfirm
|
||||
message={`Êtes-vous sûr de vouloir quitter l'éditeur sans sauvegarder le questionnaire?`}
|
||||
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>
|
||||
</div>
|
||||
<h1 className="text-center flex-grow-1">Éditeur de quiz</h1>
|
||||
<div className="w-25"></div> {/* Spacer for balance */}
|
||||
</div>
|
||||
|
||||
{/* <h2 className="subtitle">Éditeur</h2> */}
|
||||
|
||||
{/* Quiz Info */}
|
||||
<div className="row mb-4">
|
||||
<div className="col-md-8 mb-3 mb-md-0">
|
||||
<TextField
|
||||
onChange={handleQuizTitleChange}
|
||||
value={quizTitle}
|
||||
|
|
@ -227,55 +178,65 @@ const QuizForm: React.FC = () => {
|
|||
label="Titre du quiz"
|
||||
fullWidth
|
||||
/>
|
||||
<label>Choisir un dossier:
|
||||
</div>
|
||||
<div className="row mb-4">
|
||||
<div className="col-md-4 d-flex align-items-center">
|
||||
<label className="me-2">Choisir un dossier:</label>
|
||||
<NativeSelect
|
||||
id="select-folder"
|
||||
color="primary"
|
||||
value={selectedFolder}
|
||||
onChange={handleSelectFolder}
|
||||
disabled={!isNewQuiz}
|
||||
style={{ marginBottom: '16px' }} // Ajout de marge en bas
|
||||
className="flex-grow-1"
|
||||
>
|
||||
<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>
|
||||
</NativeSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button variant="contained" onClick={handleQuizSave}>
|
||||
<Button variant="contained" onClick={handleQuizSave} className="mb-4">
|
||||
Enregistrer
|
||||
</Button>
|
||||
|
||||
<Divider style={{ margin: '16px 0' }} />
|
||||
<Divider className="my-4" />
|
||||
|
||||
<div className='editSection'>
|
||||
|
||||
<div className='edit'>
|
||||
{/* Editor Section */}
|
||||
<div className="row g-4">
|
||||
{/* Editor Column */}
|
||||
<div className="col-lg-6 d-flex flex-column" style={{ height: '78vh', overflow: 'auto' }}>
|
||||
<Editor
|
||||
label="Contenu GIFT du quiz:"
|
||||
initialValue={value}
|
||||
onEditorChange={handleUpdatePreview} />
|
||||
onEditorChange={handleUpdatePreview}
|
||||
/>
|
||||
|
||||
<div className='images'>
|
||||
<div className='upload'>
|
||||
<label className="dropArea">
|
||||
<input type="file" id="file-input" className="file-input"
|
||||
{/* Images Section */}
|
||||
<div className="mt-4 p-3 border rounded">
|
||||
<div className="d-flex flex-column align-items-center mb-3">
|
||||
<input
|
||||
type="file"
|
||||
id="file-input"
|
||||
className="d-none"
|
||||
accept="image/jpeg, image/png"
|
||||
multiple
|
||||
ref={fileInputRef} />
|
||||
|
||||
ref={fileInputRef}
|
||||
/>
|
||||
<Button
|
||||
variant="outlined"
|
||||
aria-label='Téléverser'
|
||||
onClick={handleSaveImage}>
|
||||
Téléverser <Upload />
|
||||
onClick={handleSaveImage}
|
||||
startIcon={<Upload />}
|
||||
>
|
||||
Téléverser
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</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.
|
||||
|
|
@ -286,27 +247,28 @@ const QuizForm: React.FC = () => {
|
|||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</a>
|
||||
<div style={{ display: "inline" }}> ci-dessous</div>
|
||||
<div style={{ display: "inline" }}>)</div>
|
||||
<div className="mb-3">
|
||||
<div className="mb-2">
|
||||
(Voir section{' '}
|
||||
<a href="#images-section" style={{ textDecoration: "none" }} onClick={scrollToImagesSection}>
|
||||
<u><em>9. Images</em></u>
|
||||
</a>{' '}
|
||||
ci-dessous)
|
||||
<br />
|
||||
<em> - Cliquez sur un lien pour le copier</em>
|
||||
</div>
|
||||
<ul>
|
||||
<ul className="list-unstyled">
|
||||
{imageLinks.map((link, index) => {
|
||||
const imgTag = `} "texte de l'infobulle")`;
|
||||
return (
|
||||
<li key={index}>
|
||||
<li key={index} className="mb-2">
|
||||
<code
|
||||
onClick={() => handleCopyToClipboard(imgTag)}>
|
||||
onClick={() => handleCopyToClipboard(imgTag)}
|
||||
className="p-1 bg-light rounded"
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
{imgTag}
|
||||
</code>
|
||||
</li>
|
||||
|
|
@ -317,26 +279,31 @@ const QuizForm: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<GiftCheatSheet />
|
||||
|
||||
</div>
|
||||
|
||||
<div className='preview'>
|
||||
<div className="preview-column">
|
||||
{/* Preview Column */}
|
||||
<div className="col-lg-6" style={{ height: '78vh', overflow: 'auto' }}>
|
||||
<div className="p-3">
|
||||
<h4>Prévisualisation</h4>
|
||||
<div>
|
||||
<GIFTTemplatePreview questions={filteredValue} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Scroll to Top Button */}
|
||||
{showScrollButton && (
|
||||
<Button
|
||||
onClick={scrollToTop}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={scrollToTopButtonStyle}
|
||||
style={{
|
||||
position: 'fixed',
|
||||
bottom: '40px',
|
||||
right: '50px',
|
||||
padding: '10px',
|
||||
fontSize: '16px',
|
||||
zIndex: 1000,
|
||||
}}
|
||||
title="Scroll to top"
|
||||
>
|
||||
↑
|
||||
|
|
@ -346,17 +313,4 @@ const QuizForm: React.FC = () => {
|
|||
);
|
||||
};
|
||||
|
||||
const scrollToTopButtonStyle: CSSProperties = {
|
||||
position: 'fixed',
|
||||
bottom: '40px',
|
||||
right: '50px',
|
||||
padding: '10px',
|
||||
fontSize: '16px',
|
||||
color: 'white',
|
||||
backgroundColor: '#5271ff',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
zIndex: 1000,
|
||||
};
|
||||
|
||||
export default QuizForm;
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
.quizEditor .editHeader {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-content: stretch
|
||||
}
|
||||
.quizEditor .editHeader .returnButton {
|
||||
flex-basis: 10%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.quizEditor .editHeader .title {
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
.quizEditor .editHeader .dumb {
|
||||
flex-basis: 10%;
|
||||
}
|
||||
|
||||
.quizEditor .editSection {
|
||||
width: 100%;
|
||||
height: 78vh;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.quizEditor .editSection .edit {
|
||||
flex: 50%;
|
||||
padding: 5px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
|
||||
overflow: auto;
|
||||
}
|
||||
.quizEditor .editSection .edit code {
|
||||
cursor: pointer;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.quizEditor .editSection .edit .upload {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
align-items: right;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.upload .dropArea {
|
||||
flex-direction: column;
|
||||
/* align-items: stretch; */
|
||||
}
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.quizEditor .editSection .edit .upload .dropArea {
|
||||
display: flex;
|
||||
border: 1px dotted;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
/* justifyContent: center;
|
||||
alignItems: center;
|
||||
backgroundColor: dragIsOver ? "lightgray" : "white; */
|
||||
}
|
||||
|
||||
.quizEditor .editSection .preview {
|
||||
flex: 50%;
|
||||
padding: 5px;
|
||||
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
.login-links {
|
||||
padding-top: 10px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.login-links a {
|
||||
padding: 4px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.login-links a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
@ -1,39 +1,35 @@
|
|||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
import './Login.css';
|
||||
import { TextField } from '@mui/material';
|
||||
import LoadingButton from '@mui/lab/LoadingButton';
|
||||
|
||||
import LoginContainer from 'src/components/LoginContainer/LoginContainer'
|
||||
import { TextField, Button, CircularProgress } from '@mui/material';
|
||||
import LoginContainer from 'src/components/LoginContainer/LoginContainer';
|
||||
import ApiService from '../../../services/ApiService';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
|
||||
const Login: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
|
||||
const [connectionError, setConnectionError] = useState<string>('');
|
||||
const [isConnecting] = useState<boolean>(false);
|
||||
const [isConnecting, setIsConnecting] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
|
||||
// Cleanup if needed
|
||||
};
|
||||
}, []);
|
||||
|
||||
const login = async () => {
|
||||
setIsConnecting(true);
|
||||
try {
|
||||
const result = await ApiService.login(email, password);
|
||||
|
||||
if (typeof result === "string") {
|
||||
setConnectionError(result);
|
||||
return;
|
||||
} else {
|
||||
navigate("/teacher/Dashboard");
|
||||
}
|
||||
else {
|
||||
navigate("/teacher/Dashboard")
|
||||
} finally {
|
||||
setIsConnecting(false);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
const handleReturnKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
|
|
@ -43,55 +39,58 @@ const Login: React.FC = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<LoginContainer
|
||||
title='Login'
|
||||
error={connectionError}>
|
||||
|
||||
<LoginContainer title='Login' error={connectionError}>
|
||||
{/* Email Field */}
|
||||
<TextField
|
||||
label="Email"
|
||||
variant="outlined"
|
||||
className="mb-3 w-100"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="Adresse courriel"
|
||||
sx={{ marginBottom: '1rem' }}
|
||||
fullWidth={true}
|
||||
onKeyDown={handleReturnKey} // Add this line as well
|
||||
fullWidth
|
||||
onKeyDown={handleReturnKey}
|
||||
/>
|
||||
|
||||
{/* Password Field */}
|
||||
<TextField
|
||||
label="Mot de passe"
|
||||
variant="outlined"
|
||||
type="password"
|
||||
className="mb-3 w-100"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Mot de passe"
|
||||
sx={{ marginBottom: '1rem' }}
|
||||
fullWidth={true}
|
||||
onKeyDown={handleReturnKey} // Add this line as well
|
||||
fullWidth
|
||||
onKeyDown={handleReturnKey}
|
||||
/>
|
||||
|
||||
<LoadingButton
|
||||
loading={isConnecting}
|
||||
onClick={login}
|
||||
{/* Login Button */}
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{ marginBottom: `${connectionError && '2rem'}` }}
|
||||
disabled={!email || !password}
|
||||
className={`w-100 mb-${connectionError ? '4' : '3'}`}
|
||||
onClick={login}
|
||||
disabled={!email || !password || isConnecting}
|
||||
startIcon={isConnecting ? <CircularProgress size={20} /> : null}
|
||||
>
|
||||
Login
|
||||
</LoadingButton>
|
||||
</Button>
|
||||
|
||||
<div className="login-links">
|
||||
|
||||
<Link to="/teacher/resetPassword">
|
||||
{/* Links Section */}
|
||||
<div className="d-flex flex-column align-items-center pt-3">
|
||||
<Link
|
||||
to="/teacher/resetPassword"
|
||||
className="mb-2 text-decoration-none text-primary"
|
||||
>
|
||||
Réinitialiser le mot de passe
|
||||
</Link>
|
||||
|
||||
<Link to="/teacher/register">
|
||||
<Link
|
||||
to="/teacher/register"
|
||||
className="text-decoration-none text-primary"
|
||||
>
|
||||
Créer un compte
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
|
||||
</LoginContainer>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ import webSocketService, {
|
|||
} from '../../../services/WebsocketService';
|
||||
import { QuizType } from '../../../Types/QuizType';
|
||||
import GroupIcon from '@mui/icons-material/Group';
|
||||
import './manageRoom.css';
|
||||
import { ENV_VARIABLES } from 'src/constants';
|
||||
import { StudentType, Answer } from '../../../Types/StudentType';
|
||||
import LoadingCircle from 'src/components/LoadingCircle/LoadingCircle';
|
||||
|
|
@ -20,6 +19,7 @@ import ApiService from '../../../services/ApiService';
|
|||
import { QuestionType } from 'src/Types/QuestionType';
|
||||
import { Button } from '@mui/material';
|
||||
import { checkIfIsCorrect } from './useRooms';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css'; // Add Bootstrap CSS import
|
||||
|
||||
const ManageRoom: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
|
|
@ -343,13 +343,13 @@ const ManageRoom: React.FC = () => {
|
|||
|
||||
if (!formattedRoomName) {
|
||||
return (
|
||||
<div className="center">
|
||||
<div className="d-flex flex-column justify-content-center align-items-center vh-100">
|
||||
{!connectingError ? (
|
||||
<LoadingCircle text="Veuillez attendre la connexion au serveur..." />
|
||||
) : (
|
||||
<div className="center-v-align">
|
||||
<div className="d-flex flex-column align-items-center gap-3">
|
||||
<Error sx={{ padding: 0 }} />
|
||||
<div className="text-base">{connectingError}</div>
|
||||
<div className="text-center">{connectingError}</div>
|
||||
<Button
|
||||
variant="contained"
|
||||
startIcon={<Refresh />}
|
||||
|
|
@ -364,68 +364,39 @@ const ManageRoom: React.FC = () => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="room">
|
||||
<h1>Salle : {formattedRoomName}</h1>
|
||||
<div className="roomHeader">
|
||||
<div className="container-fluid p-3">
|
||||
<h1 className="text-center mb-4">Salle : {formattedRoomName}</h1>
|
||||
|
||||
{/* Room Header */}
|
||||
<div className="d-flex justify-content-between align-items-center mb-4">
|
||||
<DisconnectButton
|
||||
onReturn={handleReturn}
|
||||
askConfirm
|
||||
message={`Êtes-vous sûr de vouloir quitter?`}
|
||||
/>
|
||||
|
||||
<div
|
||||
className="headerContent"
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
width: '100%'
|
||||
}}
|
||||
>
|
||||
{(
|
||||
<div
|
||||
className="userCount subtitle smallText"
|
||||
style={{ display: "flex", justifyContent: "flex-end" }}
|
||||
>
|
||||
<GroupIcon style={{ marginRight: '5px' }} />
|
||||
{students.length}/60
|
||||
<div className="d-flex align-items-center ms-auto">
|
||||
<GroupIcon className="me-2" />
|
||||
<span className="text-muted">{students.length}/60</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="dumb"></div>
|
||||
</div>
|
||||
|
||||
{/* the following breaks the css (if 'room' classes are nested) */}
|
||||
<div className="">
|
||||
{/* Main Content */}
|
||||
{quizQuestions ? (
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<div className="title center-h-align mb-2">{quiz?.title}</div>
|
||||
<div className="d-flex flex-column">
|
||||
<h2 className="text-center mb-3">{quiz?.title}</h2>
|
||||
{!isNaN(Number(currentQuestion?.question.id)) && (
|
||||
<strong className="number of questions">
|
||||
Question {Number(currentQuestion?.question.id)}/
|
||||
{quizQuestions?.length}
|
||||
</strong>
|
||||
<p className="text-center fw-bold mb-3">
|
||||
Question {Number(currentQuestion?.question.id)}/{quizQuestions?.length}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{quizMode === 'teacher' && (
|
||||
<div className="mb-1">
|
||||
{/* <QuestionNavigation
|
||||
currentQuestionId={Number(currentQuestion?.question.id)}
|
||||
questionsLength={quizQuestions?.length}
|
||||
previousQuestion={previousQuestion}
|
||||
nextQuestion={nextQuestion}
|
||||
/> */}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mb-2 flex-column-wrapper">
|
||||
<div className="preview-and-result-container">
|
||||
<div className="mb-4" style={{ height: '70vh', overflow: 'auto' }}>
|
||||
<div className="d-flex flex-column gap-4">
|
||||
{currentQuestion && (
|
||||
<QuestionDisplay
|
||||
showAnswer={false}
|
||||
question={currentQuestion?.question as Question}
|
||||
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
@ -435,37 +406,31 @@ const ManageRoom: React.FC = () => {
|
|||
questions={quizQuestions}
|
||||
showSelectedQuestion={showSelectedQuestion}
|
||||
students={students}
|
||||
></LiveResultsComponent>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{quizMode === 'teacher' && (
|
||||
<div
|
||||
className="questionNavigationButtons"
|
||||
style={{ display: 'flex', justifyContent: 'center' }}
|
||||
>
|
||||
<div className="previousQuestionButton">
|
||||
<div className="d-flex justify-content-center gap-3 mb-4">
|
||||
<Button
|
||||
onClick={previousQuestion}
|
||||
variant="contained"
|
||||
disabled={Number(currentQuestion?.question.id) <= 1}
|
||||
className="px-4"
|
||||
>
|
||||
Question précédente
|
||||
</Button>
|
||||
</div>
|
||||
<div className="nextQuestionButton">
|
||||
<Button
|
||||
onClick={nextQuestion}
|
||||
variant="contained"
|
||||
disabled={
|
||||
Number(currentQuestion?.question.id) >=
|
||||
quizQuestions.length
|
||||
Number(currentQuestion?.question.id) >= quizQuestions.length
|
||||
}
|
||||
className="px-4"
|
||||
>
|
||||
Prochaine question
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
|
|
@ -476,7 +441,6 @@ const ManageRoom: React.FC = () => {
|
|||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,185 +0,0 @@
|
|||
|
||||
.room .roomHeader {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-content: stretch
|
||||
}
|
||||
.room .roomHeader .returnButton {
|
||||
flex-basis: 10%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.room .roomHeader .centerTitle {
|
||||
flex-basis: auto;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
|
||||
}
|
||||
|
||||
.room .roomHeader .dumb {
|
||||
flex-basis: 10%;
|
||||
}
|
||||
|
||||
.room .room {
|
||||
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%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
} */
|
||||
|
|
@ -1,15 +1,10 @@
|
|||
// EditorQuiz.tsx
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
|
||||
import { FolderType } from '../../../Types/FolderType';
|
||||
|
||||
|
||||
import './share.css';
|
||||
import { Button, NativeSelect } from '@mui/material';
|
||||
import ReturnButton from 'src/components/ReturnButton/ReturnButton';
|
||||
|
||||
import ApiService from '../../../services/ApiService';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
|
||||
const Share: React.FC = () => {
|
||||
console.log('Component rendered');
|
||||
|
|
@ -18,7 +13,6 @@ const Share: React.FC = () => {
|
|||
|
||||
const [quizTitle, setQuizTitle] = useState('');
|
||||
const [selectedFolder, setSelectedFolder] = useState<string>('');
|
||||
|
||||
const [folders, setFolders] = useState<FolderType[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -68,7 +62,6 @@ const Share: React.FC = () => {
|
|||
|
||||
const handleQuizSave = async () => {
|
||||
try {
|
||||
|
||||
if (selectedFolder == '') {
|
||||
alert("Veuillez choisir un dossier");
|
||||
return;
|
||||
|
|
@ -91,41 +84,39 @@ const Share: React.FC = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className='quizImport'>
|
||||
|
||||
<div className='importHeader'>
|
||||
<div className="container-fluid p-4">
|
||||
{/* Header */}
|
||||
<div className="d-flex justify-content-between align-items-center mb-4">
|
||||
<ReturnButton />
|
||||
|
||||
<div className='title'>Importer quiz: {quizTitle}</div>
|
||||
|
||||
<div className='dumb'></div>
|
||||
<h2 className="text-center mb-0 flex-grow-1">Importer quiz: {quizTitle}</h2>
|
||||
<div style={{ width: '10%' }}></div> {/* Spacer for alignment */}
|
||||
</div>
|
||||
|
||||
<div className='editSection'>
|
||||
|
||||
<div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="d-flex flex-column align-items-center">
|
||||
<div className="w-100 mb-3">
|
||||
<NativeSelect
|
||||
id="select-folder"
|
||||
color="primary"
|
||||
value={selectedFolder}
|
||||
onChange={handleSelectFolder}
|
||||
className="w-100 mb-3"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<Button variant="contained" onClick={handleQuizSave}>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleQuizSave}
|
||||
className="w-100"
|
||||
>
|
||||
Enregistrer
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,21 +0,0 @@
|
|||
.quizImport .importHeader {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-content: stretch
|
||||
}
|
||||
.quizImport .importHeader .returnButton {
|
||||
flex-basis: 10%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.quizImport .importHeader .title {
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
.quizImport .importHeader .dumb {
|
||||
flex-basis: 10%;
|
||||
}
|
||||
Loading…
Reference in a new issue