83 lines
3.5 KiB
TypeScript
83 lines
3.5 KiB
TypeScript
|
import * as React from "react";
|
||
|
|
|
||
|
|
import { Link } from "react-router-dom";
|
||
|
|
|
||
|
|
import Typography from "@material-ui/core/Typography";
|
||
|
|
import Grid from "@material-ui/core/Grid";
|
||
|
|
import Card from "@material-ui/core/Card";
|
||
|
|
import CardContent from "@material-ui/core/CardContent";
|
||
|
|
import CardActions from "@material-ui/core/CardActions";
|
||
|
|
import Button from "@material-ui/core/Button";
|
||
|
|
|
||
|
|
export default class IntroPage extends React.Component<{}> {
|
||
|
|
render() {
|
||
|
|
const small = window.matchMedia("(max-width: 700px)").matches;
|
||
|
|
const cName = small ? "intro-card-xs" : "intro-card-lg";
|
||
|
|
return <div>
|
||
|
|
<Grid container justify="center">
|
||
|
|
<Card className={cName}>
|
||
|
|
<CardContent>
|
||
|
|
<Typography
|
||
|
|
component="p"
|
||
|
|
variant="title">
|
||
|
|
Wilkommen bei Lateinicus!
|
||
|
|
</Typography>
|
||
|
|
|
||
|
|
<div className="vert-spacer" />
|
||
|
|
<Typography
|
||
|
|
className="intro-subheading"
|
||
|
|
component="p"
|
||
|
|
variant="subheading">
|
||
|
|
Was ist Lateinicus?
|
||
|
|
</Typography>
|
||
|
|
|
||
|
|
<Typography
|
||
|
|
variant="body1"
|
||
|
|
component="p">
|
||
|
|
Lateinicus ist eine experimentelle Lernanwendung für Lateinvokabeln. Mit Hilfe dieser
|
||
|
|
Anwendung wollen wir die Frage beantworten, ob "Gamification" tatsächlich effektiver
|
||
|
|
ist als klassisches Lernen mit Vokabelheft.
|
||
|
|
</Typography>
|
||
|
|
<Typography
|
||
|
|
variant="body1"
|
||
|
|
component="p">
|
||
|
|
Um die Effektivität zu bewerten wird vor und nach Verwendung von Lateinicus
|
||
|
|
ein Vokabeltest geschrieben, welche von uns zum Zwecke der Datenerhebung benutzt
|
||
|
|
werden.
|
||
|
|
</Typography>
|
||
|
|
|
||
|
|
<Typography
|
||
|
|
variant="body1"
|
||
|
|
component="p">
|
||
|
|
Zudem erfassen wir Daten darüber, wann und wie lange gelernt wird, damit wir diese
|
||
|
|
Werte auch in unser Fazit mit einfließen lassen können.
|
||
|
|
</Typography>
|
||
|
|
|
||
|
|
<div className="vert-spacer" />
|
||
|
|
<Typography
|
||
|
|
className="intro-subheading"
|
||
|
|
component="p"
|
||
|
|
variant="subheading">
|
||
|
|
Was ist Gamification?
|
||
|
|
</Typography>
|
||
|
|
|
||
|
|
<Typography
|
||
|
|
variant="body1">
|
||
|
|
Gamification ist ein Konzept, bei welchem eine Tätigkeit, wie hier das Lernen von
|
||
|
|
Lateinvokabeln, in ein Spiel umgewandelt wird.
|
||
|
|
</Typography>
|
||
|
|
</CardContent>
|
||
|
|
<CardActions>
|
||
|
|
<Button
|
||
|
|
fullWidth={true}
|
||
|
|
component={Link}
|
||
|
|
to="/dashboard">
|
||
|
|
Lass uns loslegen
|
||
|
|
</Button>
|
||
|
|
</CardActions>
|
||
|
|
</Card>
|
||
|
|
</Grid>
|
||
|
|
</div>;
|
||
|
|
}
|
||
|
|
};
|