Quick fix accordion header

This commit is contained in:
KenChanA 2025-04-23 16:16:50 -04:00
parent 4ee0fd5b17
commit 377c363522
2 changed files with 14 additions and 8 deletions

View file

@ -26,14 +26,16 @@ interface LiveResultsProps {
const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuestion, students }) => {
const [showUsernames, setShowUsernames] = useState<boolean>(false);
const [showCorrectAnswers, setShowCorrectAnswers] = useState<boolean>(false);
const [isOpen, setIsOpen] = useState<boolean>(true);
const [activeKey, setActiveKey] = useState<string | null>('0');
const toggleAccordion = () => {
setActiveKey(activeKey === '0' ? null : '0');
return (
<Accordion defaultActiveKey="0" alwaysOpen>
<Accordion activeKey={activeKey} onSelect={toggleAccordion}>
<Accordion.Item eventKey="0">
<Accordion.Header onClick={() => setIsOpen(!isOpen)}>
<div className="text-2xl text-bold">{isOpen ? 'Résultats du quiz' : 'Masquer les résultats'}</div>
<Accordion.Header>
<div className="text-2xl text-bold">{activeKey === '0' ? 'Résultats du quiz' : 'Masquer les résultats'}</div>
</Accordion.Header>
<Accordion.Body>
<div className="action-bar mb-1">

View file

@ -36,8 +36,12 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
// return isMobile ? '100%' : '20%';
// }, [isMobile]);
const [isOpen, setIsOpen] = useState<boolean>(true);
const [showResults, setShowResults] = useState<boolean>(false);
const [activeKey, setActiveKey] = useState<string | null>('0');
const toggleAccordion = () => {
setActiveKey(activeKey === '0' ? null : '0');
};
let questionTypeComponent = null;
switch (question?.type) {
@ -96,10 +100,10 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
return (
<>
{showAnswerToggle ? (
<Accordion defaultActiveKey="0" alwaysOpen>
<Accordion activeKey={activeKey} onSelect={toggleAccordion}>
<Accordion.Item eventKey="0">
<Accordion.Header onClick={() => setIsOpen(!isOpen)}>
{isOpen ? 'Afficher les questions' : 'Masquer les questions'}
<Accordion.Header>
{activeKey === '0' ? 'Afficher les questions' : 'Masquer les questions'}
</Accordion.Header>
<Accordion.Body>
<FormControlLabel