JSFiddle - React, Tailwind, and code Playground

by quangcanh2975

JavaScript

import React, { Component } from 'react';
import { AppRegistry, View, Text, StyleSheet } from 'react-native';
import Button from 'react-native-button';

class Score extends Component {
  constructor(props) {
    super(props);
    this.state = {
      rightAns: 0,
      wrongAns: 0
    }
  }
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text style={styles.rightAnswer}>Right Anwsers: {this.state.rightAns}</Text>
        <Text style={styles.wrongAnswer}>Wrong Anwsers: {this.state.wrongAns}</Text>
      </View>
    )
  }
}

class Panel extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center", }}>
        <Text style={{
          color: 'white', fontWeight: 'bold', fontSize: 50, width: 350, borderRadius: 5, height: 100, backgroundColor: '#4282c2', alignSelf: 'center', textAlign: 'center'
        }} >{this.props.firstNumber} x {this.props.secondNumber}</Text>
      </View>
    )
  }
}

export default class Board extends Component {
  constructor(props) {
    super(props);
    this.state = {
      start: false,
      finished: false,
      pause: false,
      didAnswer: false,
      choices: [],
      answer: 0, // answer take value [0, 1, 2] => [not answer, right, wrong]
      firstNumber: getRandomNumberInRange(1, 10),
      secondNumber: getRandomNumberInRange(1, 10),
      wherePressed: [0, 0, 0, 0],
      isRight: false,
    }
  }
  componentDidMount(previousProps) {
    this._setAnswers(this.state.firstNumber, this.state.secondNumber);
  }
  _setAnswers(_firstNumber, _secondNumber) {
    var answers = [];
    answers.push(_firstNumber * _secondNumber, _firstNumber * (_secondNumber + 1), _firstNumber * (_secondNumber + 2), _firstNumber * (_secondNumber - 1));
    answers = shuffle(answers);
    this.setState({
      firstNumber: _firstNumber,
      secondNumber: _secondNumber,
      firstAns: answers[0],
      secondAns:...