me/parandum
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Put mistakes in drop downs

Browse Source
This commit is contained in:
Matthew Grove
2021-10-09 11:48:38 +01:00
parent bc48f5b5c5
commit 6231877cf7
5 changed files with 107 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/GroupStats.js
View File

@@ -1,5 +1,5 @@
import React, { Component } from 'react';
import { GroupRounded as GroupRoundedIcon, HomeRounded as HomeRoundedIcon } from "@material-ui/icons";
import { ArrowDropDownRounded as ArrowDropDownRoundedIcon, GroupRounded as GroupRoundedIcon, HomeRounded as HomeRoundedIcon } from "@material-ui/icons";
import { withRouter } from 'react-router-dom';
import NavBar from "./NavBar";
import Footer from "./Footer";
@@ -7,6 +7,8 @@ import Error404 from "./Error404";
import "./css/History.css";
import "./css/MistakesHistory.css";
import Collapsible from "react-collapsible";
export default withRouter(class GroupStats extends Component {
constructor(props) {
super(props);
@@ -178,46 +180,60 @@ export default withRouter(class GroupStats extends Component {
<React.Fragment key={index}>
<div>
<h2>{vocabItem.term}</h2>
<p><b>{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}{vocabItem.switchedCount > 0 && ":"}</b></p>
{
vocabItem.switchedCount > 0 &&
<div>
vocabItem.switchedCount > 0
?
<Collapsible transitionTime={300} trigger={<><b>{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}</b><ArrowDropDownRoundedIcon /></>}>
{
vocabItem.answers.sort((a, b) => {
if (a.answer < b.answer) {
return -1;
vocabItem.switchedCount > 0 &&
<div>
{
vocabItem.answers.sort((a, b) => {
if (a.answer < b.answer) {
return -1;
}
if (a.answer > b.answer) {
return 1;
}
return 0;
}).map((answerItem, index) => answerItem.switchLanguage && (
<p key={index}>{answerItem.answer === "" ? <i>skipped</i> : answerItem.answer}</p>
))
}
if (a.answer > b.answer) {
return 1;
}
return 0;
}).map((answerItem, index) => answerItem.switchLanguage && (
<p key={index}>{answerItem.answer === "" ? <i>skipped</i> : answerItem.answer}</p>
))
</div>
}
</div>
</Collapsible>
:
<b>{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}</b>
}
</div>
<div>
<h2>{vocabItem.definition}</h2>
<p><b>{vocabItem.count} mistake{vocabItem.count !== 1 && "s"}{vocabItem.count > 0 && ":"}</b></p>
{
vocabItem.count > 0 &&
<div>
vocabItem.count > 0
?
<Collapsible transitionTime={300} trigger={<><b>{vocabItem.count} mistake{vocabItem.count !== 1 && "s"}</b><ArrowDropDownRoundedIcon /></>}>
{
vocabItem.answers.sort((a, b) => {
if (a.answer < b.answer) {
return -1;
vocabItem.count > 0 &&
<div>
{
vocabItem.answers.sort((a, b) => {
if (a.answer < b.answer) {
return -1;
}
if (a.answer > b.answer) {
return 1;
}
return 0;
}).map((answerItem, index) => !answerItem.switchLanguage && (
<p key={index}>{answerItem.answer === "" ? <i>skipped</i> : answerItem.answer}</p>
))
}
if (a.answer > b.answer) {
return 1;
}
return 0;
}).map((answerItem, index) => !answerItem.switchLanguage && (
<p key={index}>{answerItem.answer === "" ? <i>skipped</i> : answerItem.answer}</p>
))
</div>
}
</div>
</Collapsible>
:
<b>{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}</b>
}
</div>
</React.Fragment>

74
src/MistakesHistory.js
View File

@@ -1,10 +1,12 @@
import React, { Component } from 'react';
import { HistoryRounded as HistoryRoundedIcon, HomeRounded as HomeRoundedIcon } from "@material-ui/icons";
import { ArrowDropDownRounded as ArrowDropDownRoundedIcon, HistoryRounded as HistoryRoundedIcon, HomeRounded as HomeRoundedIcon } from "@material-ui/icons";
import NavBar from "./NavBar";
import Footer from "./Footer";
import "./css/History.css";
import "./css/MistakesHistory.css";
import Collapsible from "react-collapsible";
export default class IncorrectHistory extends Component {
constructor(props) {
super(props);
@@ -148,46 +150,60 @@ export default class IncorrectHistory extends Component {
<React.Fragment key={index}>
<div>
<h2>{vocabItem.term}</h2>
<p><b>{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}{vocabItem.switchedCount > 0 && ":"}</b></p>
{
vocabItem.switchedCount > 0 &&
<div>
vocabItem.switchedCount > 0
?
<Collapsible transitionTime={300} trigger={<><b>{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}</b><ArrowDropDownRoundedIcon /></>}>
{
vocabItem.answers.sort((a, b) => {
if (a.answer < b.answer) {
return -1;
vocabItem.switchedCount > 0 &&
<div>
{
vocabItem.answers.sort((a, b) => {
if (a.answer < b.answer) {
return -1;
}
if (a.answer > b.answer) {
return 1;
}
return 0;
}).map((answerItem, index) => answerItem.switchLanguage && (
<p key={index}>{answerItem.answer === "" ? <i>skipped</i> : answerItem.answer}</p>
))
}
if (a.answer > b.answer) {
return 1;
}
return 0;
}).map((answerItem, index) => answerItem.switchLanguage && (
<p key={index}>{answerItem.answer === "" ? <i>skipped</i> : answerItem.answer}</p>
))
</div>
}
</div>
</Collapsible>
:
<b>{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}</b>
}
</div>
<div>
<h2>{vocabItem.definition}</h2>
<p><b>{vocabItem.count} mistake{vocabItem.count !== 1 && "s"}{vocabItem.count > 0 && ":"}</b></p>
{
vocabItem.count > 0 &&
<div>
vocabItem.count > 0
?
<Collapsible transitionTime={300} trigger={<><b>{vocabItem.count} mistake{vocabItem.count !== 1 && "s"}</b><ArrowDropDownRoundedIcon /></>}>
{
vocabItem.answers.sort((a,b) => {
if (a.answer < b.answer) {
return -1;
vocabItem.count > 0 &&
<div>
{
vocabItem.answers.sort((a, b) => {
if (a.answer < b.answer) {
return -1;
}
if (a.answer > b.answer) {
return 1;
}
return 0;
}).map((answerItem, index) => !answerItem.switchLanguage && (
<p key={index}>{answerItem.answer === "" ? <i>skipped</i> : answerItem.answer}</p>
))
}
if (a.answer > b.answer) {
return 1;
}
return 0;
}).map((answerItem, index) => !answerItem.switchLanguage && (
<p key={index}>{answerItem.answer === "" ? <i>skipped</i> : answerItem.answer}</p>
))
</div>
}
</div>
</Collapsible>
:
<b>{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}</b>
}
</div>
</React.Fragment>

10
src/css/MistakesHistory.css
View File

@@ -14,4 +14,14 @@
.mistakes-history-container > div:last-child {
margin-bottom: 0;
}
.mistakes-history-container .Collapsible__trigger {
cursor: pointer;
display: flex;
margin: 0;
flex-direction: row;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
}