Skip to content

Commit

Permalink
#803 layout and code improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@mateusmarquezini
mateusmarquezini committed Aug 18, 2019
1 parent dd6c519 commit b1727bd
Show file tree
Hide file tree
Showing 7 changed files with 236 additions and 100 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@
"deploy": "npm run build && npm run asset-copy && npm run upload",
"lint": "eslint --ext js --ext jsx .",
"lintfix": "eslint --ext js --ext jsx . --fix",
"start": "webpack-dev-server --progress --profile --colors",
"start": "webpack-dev-server --client-log-level error --profile --colors",
"test": "npm run lint && tsc && jest --coverage && npm run build",
"asset-copy": "cp -R assets/* public/",
"upload": "aws s3 cp public s3://learn.guyellisrocks.com/ --recursive"
Expand Down
289 changes: 200 additions & 89 deletions src/learn/help/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,118 +1,229 @@
const React = require('react');
const ReactMarkdown = require('react-markdown');

const input = `
### Help with Math Drill
#### Options
Configure the options for the test. These options get saved in your browser \
so if you visit this page again with the same browser then the settings \
const Typography = require('@material-ui/core/Typography').default;
const Divider = require('@material-ui/core/Divider').default;
const useStyles = require('./indexStyles');

const help = () => {
const classes = useStyles();

const helpSection = (
<>
<Typography variant="h5" gutterBottom>
Options
</Typography>
<Typography component="p">
Configure the options for the test. These options get saved in your browser
so if you visit this page again with the same browser then the settings
will be as you last left them.
The scores and badges are also saved in the browser. There is no server or \
database for this app. Everything happens on your device and in the browser \
and that's where all the data lives as well. If you use a different browser \
you will start from fresh. If you share your browser with somebody they'll have \
<br />
The scores and badges are also saved in the browser. There is no server or
database for this app. Everything happens on your device and in the browser
and that&apos;s where all the data lives as well. If you use a different browser
you will start from fresh. If you share your browser with somebody they&apos;ll have
your settings and scores.
##### Level
There are 26 levels from A to Z. If you select a different level the previous \
one will be deselected. All levels are cumulative meaning that, for example \
on level E you will also get questions from levels A through D. The questions \
are randomly weighted towards the higher level you select. That means that \
if you select level E there will probably be more questions from this level \
</Typography>
</>
);
const levelSection = (
<>
<Typography variant="h5" gutterBottom>
Level
</Typography>
<Typography component="p">
There are 26 levels from A to Z. If you select a different level the previous
one will be deselected. All levels are cumulative meaning that, for example
on level E you will also get questions from levels A through D. The questions
are randomly weighted towards the higher level you select. That means that
if you select level E there will probably be more questions from this level
than level D and there will be more from level D than from C etc.
##### Operation
The four operators Addition, Subtraction, Multiplication and Division can be \
selected in any combination. At least one of them needs to be selected and all \
</Typography>
</>
);
const operationSection = (
<>
<Typography variant="h5" gutterBottom>
Operation
</Typography>
<Typography component="p">
The four operators Addition, Subtraction, Multiplication and Division can be
selected in any combination. At least one of them needs to be selected and all
four can be selected as well.
Because all Operations can be selected and because the Levels are cumulative you \
can get all four operations with all levels by selecting all the Operators and \
<br />
Because all Operations can be selected and because the Levels are cumulative you
can get all four operations with all levels by selecting all the Operators and
Level Z.
##### Time
The time is expressed in minutes and will stop the test after this time period \
has elapsed. Fractions of a minute can be used to refine the time. Time is not \
really important if you are collecting badges (see below) because average time \
</Typography>
</>
);
const timeSection = (
<>
<Typography variant="h5" gutterBottom>
Time
</Typography>
<Typography component="p">
The time is expressed in minutes and will stop the test after this time period
has elapsed. Fractions of a minute can be used to refine the time. Time is not
really important if you are collecting badges (see below) because average time
becomes the deciding factor so setting this to a high value is okay.
##### Total Questions
This is the total number of questions that will be asked. The test will end \
once this number of questions have been correctly answered. If a question is not \
correctly answered then the test will remain on that question until it is \
</Typography>
</>
);
const totalQuestionsSection = (
<>
<Typography variant="h5" gutterBottom>
Total Questions
</Typography>
<Typography component="p">
This is the total number of questions that will be asked. The test will end
once this number of questions have been correctly answered. If a question is not
correctly answered then the test will remain on that question until it is
complete.
If you want to collect badges for completed tests you must answer at least ten \
<br />
If you want to collect badges for completed tests you must answer at least ten
questions in each test.
##### Keyboard
If you're doing this on a touch device like a smart phone or tablet the the \
onscreen keyboard is the easiest to use. It's a simple keyboard that has all
</Typography>
</>
);
const keyboardSection = (
<>
<Typography variant="h5" gutterBottom>
Keyboard
</Typography>
<Typography component="p">
If you&apos;re doing this on a touch device like a smart phone or tablet the the
onscreen keyboard is the easiest to use. It&apos;s a simple keyboard that has all
the functionality you need.
If you doing this from a desktop computer or laptop then switching this off \
<br />
If you doing this from a desktop computer or laptop then switching this off
is probably going to be easier.
<br />
Try them both and see which one works best for you.
##### Large Keyboard
This will only show up if you have selected "onscreen keyboard." Selecting \
this option will increase the size of the onscreen keyboard. It seems to \
</Typography>
</>
);
const largeKeyboardSection = (
<>
<Typography variant="h5" gutterBottom>
Large Keyboard
</Typography>
<Typography component="p">
This will only show up if you have selected &ldquo;onscreen keyboard.&ldquo; Selecting
this option will increase the size of the onscreen keyboard. It seems to
make it easier for kids to use a larger keyboard sometimes.
##### Your Name
</Typography>
</>
);
const yourNameSection = (
<>
<Typography variant="h5" gutterBottom>
Your Name
</Typography>
<Typography component="p">
This is entirely optional.
### Running
Once you start running the test you will see the Level, Operation(s) \
</Typography>
</>
);
const runningSection = (
<>
<Typography variant="h5" gutterBottom>
Running
</Typography>
<Typography component="p">
Once you start running the test you will see the Level, Operation(s)
Time Left and Questions Remaining at the top of the screen.
The current question will be presented right below that with a ? in a green \
<br />
The current question will be presented right below that with a ? in a green
box where the answer will go.
Answering a question correctly will advance to the next question until they \
<br />
Answering a question correctly will advance to the next question until they
are all completed or until time runs out.
After you have started answering questions two more pieces of information \
will be presented under the question. The result of the previous question \
<br />
After you have started answering questions two more pieces of information
will be presented under the question. The result of the previous question
you answered and your current speed versus the record (if there is one).
### Finished
Once you have completed answering all your questions you'll see the results \
</Typography>
</>
);
const finishedSection = (
<>
<Typography variant="h5" gutterBottom>
Finished
</Typography>
<Typography component="p">
Once you have completed answering all your questions you&apos;ll see the results
on the Finished page.
<br />
If you have earned a new badge you will see that here as well.
There is also a summary of the question you answered quickest, slowest and \
<br />
There is also a summary of the question you answered quickest, slowest and
all your results if you want to review them.
# Scoreboard
</Typography>
</>
);
const scoreboardSection = (
<>
<Typography variant="h5" gutterBottom>
Scoreboard
</Typography>
<Typography component="p">
The scoreboard is fairly obvious.
<br />
There is a summary at the top showing all the badges you have earned.
<br />
Below that is a table showing badges by level and operation.
<br />
For now badges are only awarded for single-operation tests.
`;

function help() {
</Typography>
</>
);
return (
<ReactMarkdown source={input} />
<div>
<Typography variant="h2" gutterBottom>
Help
</Typography>
{helpSection}
<div className={classes.divider}>
<Divider />
</div>
{levelSection}
<div className={classes.divider}>
<Divider />
</div>
{operationSection}
<div className={classes.divider}>
<Divider />
</div>
{timeSection}
<div className={classes.divider}>
<Divider />
</div>
{totalQuestionsSection}
<div className={classes.divider}>
<Divider />
</div>
{keyboardSection}
<div className={classes.divider}>
<Divider />
</div>
{largeKeyboardSection}
<div className={classes.divider}>
<Divider />
</div>
{yourNameSection}
<div className={classes.divider}>
<Divider />
</div>
{runningSection}
<div className={classes.divider}>
<Divider />
</div>
{finishedSection}
<div className={classes.divider}>
<Divider />
</div>
{scoreboardSection}
</div>
);
}
};

module.exports = help;
11 changes: 11 additions & 0 deletions src/learn/help/indexStyles.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
const { makeStyles } = require('@material-ui/core/styles');

const useStyles = makeStyles(({
divider: {
paddingTop: 15,
paddingBottom: 15,
},

}));

module.exports = useStyles;
12 changes: 8 additions & 4 deletions src/learn/math/drill/options.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ const FormGroup = require('@material-ui/core/FormGroup').default;
const FormControlLabel = require('@material-ui/core/FormControlLabel').default;
const { Send } = require('@material-ui/icons');
const Tooltip = require('@material-ui/core/Tooltip').default;
const Typography = require('@material-ui/core/Typography').default;
const constants = require('../../common/constants');

const {
Expand Down Expand Up @@ -56,10 +57,13 @@ function options(props) {

return (
<div>
<Typography variant="h2" gutterBottom>
Drill
</Typography>
<div style={sectionStyle}>
<h2>
<Typography variant="h4" gutterBottom>
Level
</h2>
</Typography>
<div>
{
alphabet.map((letter, index) => (
Expand All @@ -78,9 +82,9 @@ Level
</div>
</div>
<div style={sectionStyle}>
<h2>
<Typography variant="h4" gutterBottom>
Operation
</h2>
</Typography>
<div>
{
operations.map((operation, index) => (
Expand Down
7 changes: 4 additions & 3 deletions src/learn/math/drill/scoreboard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const TableBody = require('@material-ui/core/TableBody').default;
const TableCell = require('@material-ui/core/TableCell').default;
const Table = require('@material-ui/core/Table').default;
const Paper = require('@material-ui/core/Paper').default;
const Typography = require('@material-ui/core/Typography').default;

const Badge = require('./badge');
const BadgeTotals = require('./badge-totals');
Expand Down Expand Up @@ -61,9 +62,9 @@ function scoreboard() {

return (
<div>
<h3>
Scoreboard
</h3>
<Typography variant="h2" gutterBottom>
Scoreboard
</Typography>
<BadgeTotals totals={totals} />
<Paper style={{ width: '100%' }}>
<Table>
Expand Down
Loading

0 comments on commit b1727bd

Please sign in to comment.