Quiz for any topic by uploading json of questions

[recursivezero]

Here's a kid-friendly interactive quiz application using React with the features you described. I'll split this into multiple files for better organization:

1. First, create a QuizApp.js file:

import React, { useState, useRef } from 'react';
import Question from './Question';
import Results from './Results';
import defaultQuestions from './defaultQuestions.json';
import './styles.css';

const QuizApp = () => {
  const [questions, setQuestions] = useState(defaultQuestions);
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [answers, setAnswers] = useState({});
  const [score, setScore] = useState(0);
  const [showResults, setShowResults] = useState(false);
  const fileInput = useRef(null);

  const handleAnswerSelect = (questionIndex, selectedAnswers) => {
    setAnswers(prev => ({ ...prev, [questionIndex]: selectedAnswers }));
  };

  const handleFileUpload = (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();
    
    reader.onload = (event) => {
      try {
        const newQuestions = JSON.parse(event.target.result);
        setQuestions(newQuestions);
        setCurrentQuestion(0);
        setAnswers({});
        setScore(0);
        setShowResults(false);
      } catch (error) {
        alert('Error parsing JSON file!');
      }
    };
    
    reader.readAsText(file);
  };

  const calculateScore = () => {
    let newScore = 0;
    questions.forEach((question, index) => {
      const correctAnswers = question.answers
        .filter(a => a.correct)
        .map(a => a.text);
      const userAnswers = answers[index] || [];
      
      if (question.type === 'multiple' && 
          arraysEqual(correctAnswers.sort(), userAnswers.sort())) {
        newScore += 1;
      } else if (question.type === 'single' && 
                 correctAnswers.includes(userAnswers[0])) {
        newScore += 1;
      }
    });
    return newScore;
  };

  const arraysEqual = (a, b) => {
    return JSON.stringify(a) === JSON.stringify(b);
  };

  const handleNext = () => {
    if (currentQuestion < questions.length - 1) {
      setCurrentQuestion(prev => prev + 1);
    } else {
      setScore(calculateScore());
      setShowResults(true);
    }
  };

  const handlePrevious = () => {
    setCurrentQuestion(prev => Math.max(0, prev - 1));
  };

  return (
    <div className="quiz-container">
      <h1>Kids Fun Quiz! 🎨</h1>
      
      <div className="upload-section">
        <input
          type="file"
          accept=".json"
          onChange={handleFileUpload}
          ref={fileInput}
          style={{ display: 'none' }}
        />
        <button 
          onClick={() => fileInput.current.click()}
          className="upload-button"
        >
          Upload Quiz JSON 📁
        </button>
      </div>

      {!showResults ? (
        <div className="question-section">
          <Question
            data={questions[currentQuestion]}
            questionIndex={currentQuestion}
            onAnswerSelect={handleAnswerSelect}
            selectedAnswers={answers[currentQuestion] || []}
          />
          
          <div className="navigation-buttons">
            <button 
              onClick={handlePrevious}
              disabled={currentQuestion === 0}
            >
              ← Previous
            </button>
            
            <div className="progress">
              Question {currentQuestion + 1} of {questions.length}
            </div>
            
            <button 
              onClick={handleNext}
              disabled={questions[currentQuestion].type === 'single' && 
                        !answers[currentQuestion]?.length}
            >
              {currentQuestion === questions.length - 1 ? 'Finish 🏁' : 'Next →'}
            </button>
          </div>
        </div>
      ) : (
        <Results 
          questions={questions}
          answers={answers}
          score={score}
          onRestart={() => {
            setCurrentQuestion(0);
            setAnswers({});
            setShowResults(false);
          }}
        />
      )}
    </div>
  );
};

export default QuizApp;

2. Create a Question.js component:

const Question = ({ data, questionIndex, onAnswerSelect, selectedAnswers }) => {
  const handleAnswerToggle = (answerText) => {
    if (data.type === 'multiple') {
      const newAnswers = selectedAnswers.includes(answerText)
        ? selectedAnswers.filter(a => a !== answerText)
        : [...selectedAnswers, answerText];
      onAnswerSelect(questionIndex, newAnswers);
    } else {
      onAnswerSelect(questionIndex, [answerText]);
    }
  };

  return (
    <div className="question-card">
      <h3>{data.question} {data.emoji || '🧐'}</h3>
      <div className="answers-grid">
        {data.answers.map((answer, index) => (
          <button
            key={index}
            onClick={() => handleAnswerToggle(answer.text)}
            className={`answer-button ${
              selectedAnswers.includes(answer.text) ? 'selected' : ''
            }`}
          >
            {answer.text} {answer.emoji || '💡'}
            {selectedAnswers.includes(answer.text) && (
              <span className="checkmark">✔️</span>
            )}
          </button>
        ))}
      </div>
    </div>
  );
};

export default Question;

3. Create a Results.js component:

const Results = ({ questions, answers, score, onRestart }) => {
  return (
    <div className="results-card">
      <h2>All Done! 🎉</h2>
      <div className="score-display">
        Your Score: {score}/{questions.length} 🌟
      </div>
      
      <div className="answers-review">
        {questions.map((question, index) => (
          <div key={index} className="question-review">
            <h4>{question.question}</h4>
            <div className="correct-answer">
              Correct: {question.answers
                .filter(a => a.correct)
                .map(a => a.text + (a.emoji || ''))
                .join(', ')}
            </div>
            <div className="your-answer">
              Your Answer: {answers[index]?.join(', ') || 'None'}
            </div>
          </div>
        ))}
      </div>
      
      <button onClick={onRestart} className="restart-button">
        Play Again? 🔄
      </button>
    </div>
  );
};

export default Results;

4. Create a defaultQuestions.json file:

[
  {
    "question": "What is 2 + 2?",
    "type": "single",
    "emoji": "➕",
    "answers": [
      {"text": "3", "correct": false},
      {"text": "4", "correct": true, "emoji": "🎉"},
      {"text": "5", "correct": false}
    ]
  },
  {
    "question": "Select all animals 🐾",
    "type": "multiple",
    "answers": [
      {"text": "Car", "correct": false},
      {"text": "Dog", "correct": true, "emoji": "🐶"},
      {"text": "Cat", "correct": true, "emoji": "🐱"},
      {"text": "Tree", "correct": false}
    ]
  }
]

5. Create a styles.css file:

body {
  font-family: 'Comic Sans MS', cursive;
  background: #f0f9ff;
  display: flex;
  justify-content: center;
  padding: 20px;
}

.quiz-container {
  background: white;
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
  max-width: 800px;
  width: 100%;
}

.upload-button {
  background: #4CAF50;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 20px;
  transition: transform 0.2s;
}

.upload-button:hover {
  transform: scale(1.05);
}

.question-card {
  background: #fff9e6;
  padding: 20px;
  border-radius: 15px;
  margin: 20px 0;
}

.answers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 15px;
}

.answer-button {
  background: #ffd700;
  border: 3px solid #ffaa00;
  padding: 15px;
  border-radius: 15px;
  cursor: pointer;
  font-size: 18px;
  position: relative;
  transition: all 0.2s;
}

.answer-button:hover {
  background: #ffeb3b;
}

.answer-button.selected {
  background: #a5d6a7;
  border-color: #4CAF50;
}

.checkmark {
  position: absolute;
  right: 10px;
}

.navigation-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

button {
  background: #2196F3;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 16px;
}

button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.progress {
  font-weight: bold;
  color: #666;
}

.results-card {
  background: #e8f5e9;
  padding: 20px;
  border-radius: 15px;
}

.score-display {
  font-size: 24px;
  color: #2e7d32;
  margin: 20px 0;
  text-align: center;
}

.question-review {
  background: white;
  padding: 15px;
  margin: 10px 0;
  border-radius: 10px;
}

.correct-answer {
  color: #4CAF50;
  font-weight: bold;
}

.your-answer {
  color: #2196F3;
}

.restart-button {
  background: #ff5722;
  margin-top: 20px;
  width: 100%;
}

To use this application:

1. The default questions will load automatically
2. Users can upload their own JSON file with questions using the upload button
3. The JSON format should match the structure of the defaultQuestions.json
4. The quiz shows progress and score
5. Results page shows all answers and correct solutions
6. Responsive design works on both desktop and mobile

Key features:

• Colorful and kid-friendly UI with emojis
• Interactive answer selection with animations
• Immediate feedback through visual indicators
• Progress tracking
• Score calculation
• JSON upload capability
• Previous/Next navigation
• Results review
• Restart capability

You can extend this further by:

• Adding more animations
• Including sound effects
• Adding timer functionality
• Implementing different difficulty levels
• Adding more question types (e.g., drag-and-drop)
• Including progress saving functionality

[recursivezero]

sample example

https://jamesg.blog/2025/02/13/html-quiz