feat: Add a welcome page
This commit is contained in:
parent
74904a2be5
commit
b63a36d0f0
@ -29,6 +29,7 @@ import LevelListPage from "../pages/levelList";
|
||||
import LevelPage from "../pages/level";
|
||||
import ReviewPage from "../pages/review";
|
||||
import SummaryPage from "../pages/summary";
|
||||
import WelcomePage from "../pages/intro";
|
||||
|
||||
import { ILevel } from "../models/level";
|
||||
import { ILearner } from "../models/learner";
|
||||
@ -207,6 +208,7 @@ export default class Application extends React.Component<{}, IState> {
|
||||
console.log("STUB: Application::login");
|
||||
|
||||
return new Promise((res, rej) => {
|
||||
// TODO: First login? Redirect to /welcome
|
||||
// TODO
|
||||
this.setState({
|
||||
loggedIn: true
|
||||
@ -361,6 +363,12 @@ export default class Application extends React.Component<{}, IState> {
|
||||
lastReview={this.getLastReview}
|
||||
getTopTen={this.getTopTenLearners} />
|
||||
}} />
|
||||
<AuthRoute
|
||||
isAuth={this.isAuthenticated}
|
||||
path="/welcome"
|
||||
component={() => {
|
||||
return <WelcomePage />
|
||||
}} />
|
||||
<AuthRoute
|
||||
isAuth={this.isAuthenticated}
|
||||
path="/levelList"
|
||||
|
@ -44,3 +44,20 @@ body {
|
||||
.content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.vert-spacer {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.intro-card-lg {
|
||||
width: 50%;
|
||||
}
|
||||
.intro-card-xs {
|
||||
width: 100%;
|
||||
}
|
||||
.intro-subheading {
|
||||
border-right: solid;
|
||||
border-left: solid;
|
||||
|
||||
border-color: red;
|
||||
}
|
||||
|
82
src/pages/intro.tsx
Normal file
82
src/pages/intro.tsx
Normal file
@ -0,0 +1,82 @@
|
||||
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>;
|
||||
}
|
||||
};
|
Reference in New Issue
Block a user