PapaTutuWawa/Lateinicus
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: Add a welcome page

Browse Source
This commit is contained in:
Alexander Polynomdivision 2018-09-15 15:28:27 +02:00
parent 74904a2be5
commit b63a36d0f0
3 changed files with 107 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/app.tsx
View File

@ -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"

17
src/index.css
View File

@ -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
View 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>;
}
};