src/components/Quiz.tsx

import React, { useState } from 'react';
import { SlideData } from '../data/slides';
import { styles } from '../styles/appStyles';

const Quiz = ({ quiz }: { quiz: NonNullable<SlideData['quiz']>; }) => {
    const { question, options, correctAnswer } = quiz;
    const [selectedAnswer, setSelectedAnswer] = useState<string | null>(null);
    const [submitted, setSubmitted] = useState(false);

    const handleSelect = (optionKey: string) => !submitted && setSelectedAnswer(optionKey);
    const handleSubmit = () => selectedAnswer && setSubmitted(true);

    return (
        <div>
            <p style={styles.paragraph} dangerouslySetInnerHTML={{ __html: question }} />
            <div>
                {Object.entries(options).map(([key, text]) => {
                    const isSelected = selectedAnswer === key;
                    let borderColor = '#ccc';
                    if (submitted) {
                        if (key === correctAnswer) borderColor = '#28a745';
                        else if (isSelected) borderColor = '#dc3545';
                    } else if (isSelected) {
                        borderColor = '#007acc';
                    }

                    return (
                        <div key={key} onClick={() => handleSelect(key)} style={{ ...styles.quizOption, borderColor, borderWidth: isSelected ? '2px' : '1px' }}>
                            <strong>{key}: </strong>
                            <span dangerouslySetInnerHTML={{ __html: text }} />
                        </div>
                    );
                })}
            </div>
            <div style={{ marginTop: '1.5rem', textAlign: 'center' }}>
                <button onClick={handleSubmit} disabled={!selectedAnswer || submitted} style={{ ...styles.button, ...((!selectedAnswer || submitted) && styles.buttonDisabled) }}>
                    Submit Answer
                </button>
                {submitted && (
                    <p style={{ ...styles.paragraph, color: selectedAnswer === correctAnswer ? '#28a745' : '#dc3545', fontWeight: 'bold' }}>
                        {selectedAnswer === correctAnswer ? 'Correct!' : 'Not quite. The correct answer highlights the need for statistical testing.'}
                    </p>
                )}
            </div>
        </div>
    );
};

export default Quiz;