Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React from "react";
import { Modal, Button } from "react-bootstrap";
import { PieChart } from "react-minimal-pie-chart";
function Question(props) {
let { correct, incorrect, testAgain } = props;
let correctPercentage = (correct / 10) * 100;
let incorrectPercentage = 100 - correctPercentage;
return (
<Modal show={true} onHide={testAgain} animation={false}>
<Modal.Header>
<Modal.Title>Your luck: {correctPercentage}%</Modal.Title>
</Modal.Header>
<Modal.Body>
<PieChart
data={[
{
title: "Correct",
value: correctPercentage,
color: "#38bb38",
},
{
title: "Incorrect",
value: incorrectPercentage,
color: "#e24646",
},
]}
/>
<div className="numbers-container">
<div className="numbers">
<div className="number correct">{correct}</div>
<div className="number incorrect">{incorrect}</div>
</div>
</div>
</Modal.Body>
<Modal.Footer>
<Button variant="primary" onClick={testAgain}>
Test again
</Button>
</Modal.Footer>
</Modal>
);
}
export default Question;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment