Skip to content

Commit

Permalink
adding chart for stat
Browse files Browse the repository at this point in the history
  • Loading branch information
@alainib
alainib committed Nov 8, 2019
1 parent f4d5f15 commit fd56ef3
Show file tree
Hide file tree
Showing 6 changed files with 2,062 additions and 79 deletions.
10 changes: 9 additions & 1 deletion web/src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,5 +57,13 @@

.img-max {
max-width: 100%;
margin: 20;
padding: 20px;
}

.btn:focus {
outline: none;
}

.btn-nooutline {
outline: none !important;
}
41 changes: 41 additions & 0 deletions web/src/components/ResultsStat.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React, { Component } from "react";
import CanvasJSReact from "../lib/canvasjs.react";

var CanvasJSChart = CanvasJSReact.CanvasJSChart;

export default class ResultsStat extends Component {
render() {
const options = {
title: {
text: "Résultat :"
},
legend: {
maxWidth: 350,
itemWidth: 120
},
data: [
{
type: "pie",
showInLegend: true,
legendText: "{indexLabel}",
dataPoints: [
{ label: "1 réponse" + (this.props.results.oneRep > 1 ? "s" : ""), y: this.props.results.oneRep },
{ label: "2 réponse" + (this.props.results.twoRep > 1 ? "s" : ""), y: this.props.results.twoRep },
{ label: "3 réponse" + (this.props.results.threeRep > 1 ? "s" : ""), y: this.props.results.threeRep },
{ label: "4 réponse" + (this.props.results.fourRep > 1 ? "s" : ""), y: this.props.results.fourRep },
{ label: "5+ réponse" + (this.props.results.fiveAndMoreRep > 1 ? "s" : ""), y: this.props.results.fiveAndMoreRep },
{ label: "sautée" + (this.props.results.skiped > 1 ? "s" : ""), y: this.props.results.skiped }
]
}
]
};
return (
<div style={{ padding: 50 }}>
<CanvasJSChart
options={options}
/* onRef = {ref => this.chart = ref} */
/>
</div>
);
}
}
209 changes: 131 additions & 78 deletions web/src/components/Trainserie.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { Component } from "react";
import { useParams } from "react-router";
import { BrowserRouter as Router, Route, Link, withRouter } from "react-router-dom";

import ResultsStat from "./ResultsStat";
import { Container, Row, Col, Button } from "react-bootstrap";
import Config from "../Config";
import { image_randomSerie } from "../services/image";
Expand All @@ -20,7 +21,7 @@ class Trainserie extends Component {
}

async componentDidMount() {
let res = await image_randomSerie(this.state.serieName, 20, 4, "ar", Config._const.easy);
let res = await image_randomSerie(this.state.serieName, 10, 4, "ar", Config._const.easy);

this.setState({ questions: res.questions, index: 0, ready: true });
}
Expand Down Expand Up @@ -61,7 +62,6 @@ class Trainserie extends Component {

if (question) {
question.answer.showBorder = false;

this.setState({ questions });
}
}, 500);
Expand All @@ -82,93 +82,146 @@ class Trainserie extends Component {
if (!this.state.ready) {
return <div>loading</div>;
}
let ImageWidth = 150;
let question = this.state.questions[this.state.index];

let borderStyle = {};
if (this.state.index < this.state.questions.length) {
let ImageWidth = 150;
let question = this.state.questions[this.state.index];

let borderStyle = { borderRadius: "20px" };

if (question.answer.showBorder) {
if (question.answer.correct) {
borderStyle["border"] = "10px solid green";
} else if (question.answer.wrong) {
borderStyle["border"] = "10px solid red";
if (question.answer.showBorder) {
if (question.answer.correct) {
borderStyle["border"] = "4px solid green";
} else if (question.answer.wrong) {
borderStyle["border"] = "4px solid red";
}
}
}

return (
<div style={{ margin: 20 }}>
<h3>Requested Serie: {this.state.serieName}</h3>

<Row>
<Col xs={2} md={1} style={{ display: "flex", justifyContent: "flex-start" }}>
<Button
variant="false"
onClick={() => {
if (this.state.index > 0) {
this.setState({ index: this.state.index - 1 });
}
}}
>
<span style={{ color: "white" }}>{this.state.index > 0 && <FaArrowLeft size={32} />}</span>
</Button>
</Col>
<Col xs={8} md={10} style={{ display: "flex", justifyContent: "center" }}>
<Button
variant="false"
onClick={() => {
this.playSound(question.audio);
}}
>
<div style={{ color: "white" }}>
<FaVolumeUp size={32} />
</div>
</Button>
<span style={{ fontSize: "3em" }}>{question.display}</span>
</Col>
<Col xs={2} md={1} style={{ display: "flex", justifyContent: "flex-end" }}>
<Button
variant="false"
onClick={() => {
if (this.state.index < this.state.questions.length) {
this.setState({ index: this.state.index + 1 });
}
}}
>
<span style={{ color: "white" }}>
<FaArrowRight size={32} />
</span>
</Button>
</Col>
</Row>

<Row>
{question.images.map((item, index) => {
return (
<Col
key={"im" + index.toString()}
xs={3}
style={{
display: "flex",
alignItems: "center",
justifyContent: "center"
return (
<div style={{ margin: 20 }}>
<h3>Requested Serie: {this.state.serieName}</h3>

<Row>
<Col xs={2} md={1} style={{ display: "flex", justifyContent: "flex-start" }}>
<Button
className="btn-nooutline"
variant="false"
onClick={() => {
if (this.state.index > 0) {
this.setState({ index: this.state.index - 1 });
}
}}
>
<span style={{ color: "white" }}>{this.state.index > 0 && <FaArrowLeft size={32} />}</span>
</Button>
</Col>
<Col xs={8} md={10} style={{ display: "flex", justifyContent: "center" }}>
<Button
variant="false"
onClick={() => {
this.playSound(question.audio);
}}
>
<div style={question.answer.clickedIndex == index ? borderStyle : {}}>
<Button
variant="false"
<div style={{ color: "white" }}>
<FaVolumeUp size={32} />
</div>
</Button>
<span style={{ fontSize: "3em" }}>{question.display}</span>
</Col>
<Col xs={2} md={1} style={{ display: "flex", justifyContent: "flex-end" }}>
<Button
variant="false"
onClick={() => {
if (this.state.index < this.state.questions.length) {
this.setState({ index: this.state.index + 1 });
}
}}
>
<span style={{ color: "white" }}>
<FaArrowRight size={32} />
</span>
</Button>
</Col>
</Row>

<Row>
{question.images.map((item, index) => {
return (
<Col
key={"im" + index.toString()}
xs={3}
style={{
display: "flex",
alignItems: "center",
justifyContent: "center"
}}
>
<div
style={question.answer.clickedIndex == index ? borderStyle : {}}
onClick={() => {
this.chooseAnswer(index);
}}
>
<img className="img-max" src={item} />
</Button>
</div>
</Col>
);
})}
</Row>
</div>
);
</div>
</Col>
);
})}
</Row>
</div>
);
} else {
return <div>{this.showResults()}</div>;
}
}

showResults() {
let { questions } = this.state;
if (!questions) {
return <div>Pas de question</div>;
}
try {
let results = {
total: questions.length,
oneRep: 0,
twoRep: 0,
threeRep: 0,
fourRep: 0,
fiveAndMoreRep: 0,
skiped: 0
};
for (let i in questions) {
if (questions[i].answer.correct) {
switch (questions[i].answer.attempt) {
case 0:
case 1:
results.oneRep++;
break;
case 2:
results.twoRep++;
break;
case 3:
results.threeRep++;
break;
case 4:
results.fourRep++;
break;
case 5:
results.fiveAndMoreRep++;
break;
default:
results.fiveAndMoreRep++;
}
} else {
results.skiped++;
}
}

return <ResultsStat results={results}></ResultsStat>;
} catch (error) {
console.warn(error);
return <div>Erreur de calcul </div>;
}
}
}

Expand Down
Loading

0 comments on commit fd56ef3

Please sign in to comment.