This repository has been archived on 2022-03-12. You can view files and clone it, but cannot push or open issues or pull requests.
Lateinicus/src/pages/review.tsx

91 lines
2.6 KiB
TypeScript
Raw Normal View History

import * as React from "react";
import Card from "@material-ui/core/Card";
import TextField from "@material-ui/core/TextField";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Button";
import { IVocab, ReviewMode } from "../models/vocab";
interface IProps {
levelId: number;
vocabByLevel: (level: number) => IVocab[];
}
interface IState {
input: string;
current: number;
}
export default class ReviewPage extends React.Component<IProps> {
private vocab: IVocab[] = [];
constructor(props: any) {
super(props);
this.state = {
input: "",
current: 0,
};
const { vocabByLevel, levelId } = this.props;
this.vocab = vocabByLevel(levelId);
this.currentVocab = this.currentVocab.bind(this);
}
currentVocab() {
return this.vocab[this.state.current];
}
checkInput = () => {
const current = this.currentVocab();
// Check if the user's answer was correct
// TODO: Levensthein-Distance?
if (this.state.input === current.german) {
// TODO: Show it's correct
console.log("Hell yeah");
// Show the next vocab word
if (this.state.current + 1 >= this.vocab.length) {
// TODO: Go to a summary screen
} else {
// Increase the vocab
this.setState({
current: this.state.current + 1,
});
}
} else {
// TODO: Show it's wrong
console.log("Hell no");
}
// TODO: Show a snackbar for showing the updated score
}
render() {
return <div style={{ margin: 12 }}>
<Grid container justify="center">
<Grid item>
<Card>
<Grid container direction="column">
<h1>
{this.vocab[this.state.current].latin}
</h1>
<TextField
value={this.state.input}
onChange={(ev) => this.setState({
input: ev.target.value,
})} />
<Button onClick={this.checkInput}>
Prüfen
</Button>
</Grid>
</Card>
</Grid>
</Grid>
</div>;
}
};