React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by andersb79

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react-with-addons.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

CSS

body {
  font-family: "Comic Sans MS", "Arial", sans-serif;
  background-color: #f0e4f7;
  color: #333;
  text-align: center;
}

h1 {
  color: #ff69b4;
}

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

button:hover {
  background-color: #ff8fd4;
}

.timer,
.question-info {
  font-size: 20px;
  margin: 10px 0;
}

.answer-input {
  margin: 20px 0;
  font-size: 24px;
  font-weight: bold;
}

.question {
  margin: 20px 0;
  font-size: 22px;
}

@media (max-width: 768px) {
  body {
    font-size: 16px; /* Större basfontstorlek för bättre läsbarhet */
  }

  .question {
    font-size: 80px; /* Gör frågan större och mer framträdande */
    color: #4a2a8f; /* Välj en färg som står ut, men fortfarande är lätt att läsa */
  }

  button {
    font-size: 18px; /* Större text på knapparna för enklare interaktion */
    padding: 15px 25px; /* Större knappar för att underlätta klick */
  }

  h1 {
    margin-top: 20px; /* Ge lite mer utrymme överst */
  }
}

JavaScript 1.7

import React, { useState, useEffect } from "react";
import "./styles.css";

function generateQuestions() {
  const tables = [4, 6, 7, 8, 9];
  const exclude = [0, 1, 2, 3, 5, 10];
  let questions = [];

  tables.forEach((table) => {
    for (let i = 1; i <= 10; i++) {
      if (!exclude.includes(i)) {
        questions.push({ factor1: table, factor2: i, answer: table * i });
      }
    }
  });

  return questions;
}

function App() {
  const [testLength, setTestLength] = useState(5); // Standardlängd på testet är 5 minuter
  const [remainingTime, setRemainingTime] = useState(testLength * 60);
  const [currentQuestion, setCurrentQuestion] = useState({});
  const [userAnswer, setUserAnswer] = useState("");
  const [result, setResult] = useState(0);
  const [answeredQuestions, setAnsweredQuestions] = useState(0);
  const [questions, setQuestions] = useState(generateQuestions());
  const [testStarted, setTestStarted] = useState(false);
  const buttonStyle = {
    backgroundColor: "#ff69b4",
    border: "none",
    borderRadius: "5px",
    color: "white",
    padding: "10px 20px",
    margin: "5px",
    cursor: "pointer",
    fontSize: "16px",
  };

  useEffect(() => {
    if (testStarted) {
      const timer = setInterval(() => {
        setRemainingTime((prevTime) => {
          if (prevTime > 0) return prevTime - 1;
          clearInterval(timer);
          return 0;
        });
      }, 1000);

      setCurrentQuestion(
        questions[Math.floor(Math.random() * questions.length)]
      );

      return () => clearInterval(timer);
    }
  }, [testStarted, questions]);

  const nextQuestion = () => {
    if (parseInt(userAnswer) === currentQuestion.answer) {
      setResult((prevResult) => prevResult + 1);
    }
    setUserAnswer("");
    setAnsweredQuestions((prevCount) => prevCount + 1);

    let newQuestions = questions.filter((q) => q !== currentQuestion);
    setCurrentQuestion(
      newQuestions[Math.floor(Math.random() * newQuestions.length)]
    );
   ...