89 | You need 10 or more correct answers to earn a badge. On this
90 | test you got 9 answer(s) correct.
91 |
92 | `;
93 |
--------------------------------------------------------------------------------
/src/learn/home.jsx:
--------------------------------------------------------------------------------
1 | const FloatingActionButton = require('@material-ui/core/Fab').default;
2 | const { Link } = require('react-router-dom');
3 | const Button = require('@material-ui/core/Button').default;
4 | const React = require('react');
5 | const { Share, BugReport } = require('@material-ui/icons');
6 | const Tooltip = require('@material-ui/core/Tooltip').default;
7 |
8 | const style = {
9 | marginTop: '20px',
10 | };
11 |
12 | const githubIconStyle = {
13 | textAlign: 'right',
14 | marginTop: '20px',
15 | };
16 |
17 | function share() {
18 | navigator.share({
19 | title: 'Math Drill',
20 | text: 'Math Exercises for Kids',
21 | url: 'https://learn.guyellisrocks.com',
22 | })
23 | // eslint-disable-next-line no-console
24 | .then(() => console.log('Successful share'))
25 | // eslint-disable-next-line no-console
26 | .catch((error) => console.log('Error sharing', error));
27 | }
28 |
29 | function shareComponent() {
30 | if (!navigator.share) {
31 | return null;
32 | }
33 | const shareStyle = {
34 | paddingLeft: '20px',
35 | };
36 | return (
37 | ",
3 | "bugs": {
4 | "url": "https://github.com/guyellis/learn/issues"
5 | },
6 | "dependencies": {
7 | "@material-ui/core": "4.3.3",
8 | "@material-ui/icons": "4.2.1",
9 | "autoprefixer": "10.4.16",
10 | "fs-extra": "8.1.0",
11 | "html-webpack-plugin": "5.5.0",
12 | "lodash": "4.17.21",
13 | "material-ui": "0.20.2",
14 | "mini-css-extract-plugin": "0.8.0",
15 | "moment": "2.29.4",
16 | "node-sass": "9.0.0",
17 | "prop-types": "15.7.2",
18 | "react": "16.9.0",
19 | "react-dom": "16.9.0",
20 | "react-markdown": "8.0.4",
21 | "react-router-dom": "5.1.2",
22 | "sass-loader": "7.3.1",
23 | "webpack": "5.94.0",
24 | "webpack-cleanup-plugin": "0.5.1",
25 | "webpack-cli": "3.3.12"
26 | },
27 | "description": "Experimental learning exercises for my kids",
28 | "devDependencies": {
29 | "awesome-typescript-loader": "5.2.1",
30 | "babel-eslint": "10.0.3",
31 | "css-loader": "6.8.1",
32 | "eslint": "6.7.2",
33 | "eslint-config-airbnb": "18.0.1",
34 | "eslint-config-airbnb-base": "14.0.0",
35 | "eslint-plugin-import": "2.18.2",
36 | "eslint-plugin-jest": "23.1.1",
37 | "eslint-plugin-jsx-a11y": "6.2.3",
38 | "eslint-plugin-react": "7.14.3",
39 | "file-loader": "5.0.2",
40 | "jest": "29.3.1",
41 | "postcss-loader": "7.3.3",
42 | "pre-commit": "1.2.2",
43 | "react-hot-loader": "4.12.18",
44 | "react-test-renderer": "16.8.6",
45 | "source-map-loader": "0.2.4",
46 | "style-loader": "1.0.1",
47 | "ts-jest": "29.0.3",
48 | "typescript": "3.5.3",
49 | "url-loader": "3.0.0",
50 | "webpack-dev-server": "5.2.1"
51 | },
52 | "engines": {
53 | "node": ">=10",
54 | "npm": ">=6"
55 | },
56 | "homepage": "https://github.com/guyellis/learn#readme",
57 | "license": "MIT",
58 | "main": "index.js",
59 | "name": "learn",
60 | "pre-commit": {
61 | "colors": true,
62 | "run": [
63 | "test"
64 | ],
65 | "silent": false
66 | },
67 | "repository": {
68 | "type": "git",
69 | "url": "git+https://github.com/guyellis/learn.git"
70 | },
71 | "scripts": {
72 | "build": "webpack --config webpack.production.config.js --progress --profile --colors",
73 | "coverage:view": "google-chrome coverage/lcov-report/index.html",
74 | "coverage": "tsc && jest --coverage",
75 | "deploy": "npm run build && npm run asset-copy && npm run upload",
76 | "lint": "eslint --ext js --ext jsx .",
77 | "lintfix": "eslint --ext js --ext jsx . --fix",
78 | "start": "webpack-dev-server --hot --progress --profile --colors",
79 | "test": "npm run lint && npm run lintfix && tsc && jest --coverage && npm run build",
80 | "asset-copy": "cp -R assets/* public/",
81 | "upload": "aws s3 cp public s3://learn.guyellisrocks.com/ --recursive"
82 | },
83 | "version": "0.0.2"
84 | }
85 |
--------------------------------------------------------------------------------
/test/learn/math/drill/score-bar.test.jsx:
--------------------------------------------------------------------------------
1 | const React = require('react');
2 | const renderer = require('react-test-renderer');
3 | const ScoreBar = require('../../../../src/learn/math/drill/score-bar');
4 |
5 | function mockDates(times) {
6 | Date.now = jest.fn();
7 | times.forEach((time) => {
8 | const mockDate = time.date + time.dateMockDelta;
9 | Date.now.mockImplementationOnce(() => mockDate);
10 | });
11 | }
12 |
13 | describe('ScoreBar', () => {
14 | const nowFn = Date.now;
15 | afterAll(() => {
16 | Date.now = nowFn;
17 | });
18 |
19 | test('should not show if showScoreBar is false', () => {
20 | const times = [];
21 |
22 | const component = renderer.create(
5 |
6 |
29 |
32 | 1
33 |
34 |
35 |
36 | Gold Badge(s) - 2 seconds or less (per question)
37 |
38 |
39 |
40 |
63 |
66 | 2
67 |
68 |
69 |
70 | Silver Badge(s) - between 2 and 3 seconds (per question)
71 |
72 |
73 |
74 |
97 |
100 | 3
101 |
102 |
103 |
104 | Bronze Badge(s) - between 3 and 4 seconds (per question)
105 |
106 |
107 |
26 | {
27 | badges.map((amount, color) => {
28 | if (!amount) {
29 | return null;
30 | }
31 | const key = `${amount}${color}`;
32 |
33 | return (
34 |
43 | );
44 | }
45 |
46 | function scoreboard() {
47 | const { ops: operations, totals, levels } = helper.getScoreboard();
48 | const ops = [...operations];
49 | const opNames = ops.map((op) => {
50 | const operators = op.split('');
51 | const names = operators.map((operator) => operationNames[parseInt(operator, 10)]);
52 | return names.join(' / ');
53 | });
54 | /*
55 | {
56 | ops, // A Set of strings representing operators
57 | totals, // A 4 element array of badge totals
58 | levels, // An sparse array of up to 26 elements of objects with keys matching values in ops Set
59 | }
60 | */
61 |
62 | return (
63 |
64 |
65 | Scoreboard
66 |
67 |
68 |
69 |
70 |
71 |
72 | Level
73 | {opNames.map((opName) => (
74 |
75 | {opName}
76 |
77 | ))}
78 |
79 |
80 |
81 | {levels.map((level, index) => (level ? (
82 |
83 |
84 | {alphabet[index]}
85 |
86 | {ops.map((op) => (
87 | {badge(level[op])}
88 | ))}
89 |
90 | ) : ('')
91 | ))}
92 |
93 |
94 |
95 |
37 | {
38 | showIndex
39 | && (
40 |
41 | {`${id + 1})`}
42 |
43 | )
44 | }
45 |
47 | {left}
48 |
49 |
50 | {operation}
51 |
52 |
53 | {right}
54 |
55 |
56 | =
57 |
58 |
59 | {actual}
60 |
61 |
62 | {correct ? check : xmark}
63 |
64 |
65 | {`${timeTaken} seconds`}
66 |
67 | {
68 | !!incorrects.length
69 | && (
70 |
71 | {`Incorrect answer(s): ${incorrects.join()}`}
72 |
73 | )
74 | }
75 |
76 | );
77 | });
78 | return (
79 |
80 | {previousResultRows}
81 |
82 | );
83 | }
84 |
85 | runningResults.propTypes = {
86 | previousResults: PropTypes.arrayOf(PropTypes.shape({
87 | actuals: PropTypes.arrayOf(PropTypes.number).isRequired,
88 | id: PropTypes.number.isRequired,
89 | task: PropTypes.array.isRequired, // left, right, opIndex, answer
90 | timeTaken: PropTypes.number.isRequired,
91 | })).isRequired,
92 | showIndex: PropTypes.bool,
93 | };
94 |
95 | runningResults.defaultProps = {
96 | showIndex: false,
97 | };
98 |
99 | module.exports = runningResults;
100 |
--------------------------------------------------------------------------------
/src/learn/math/drill/running.jsx:
--------------------------------------------------------------------------------
1 | const PropTypes = require('prop-types');
2 | const React = require('react');
3 | const constants = require('../../common/constants');
4 | const QuizLine = require('./quiz-line');
5 | const RunningResults = require('./running-results');
6 |
7 | const {
8 | ALPHABET: alphabet,
9 | OPERATIONS: operations,
10 | } = constants;
11 |
12 | function running(props) {
13 | const {
14 | checkAnswer,
15 | currentTask,
16 | largeKeyboard,
17 | levelIndex,
18 | newRecord,
19 | onscreenKeyboard,
20 | opIndexes,
21 | previousResults,
22 | questionsRemaining,
23 | timeLeft,
24 | } = props;
25 |
26 | if (!currentTask) {
27 | // eslint-disable-next-line no-console
28 | console.warn('No currentTask defined in renderRunning');
29 | return null;
30 | }
31 |
32 | const spanStyle = {
33 | paddingLeft: 20,
34 | };
35 |
36 | const lastTen = previousResults.slice(Math.max(0, previousResults.length - 10)).reverse();
37 | const lastResult = lastTen[0];
38 |
39 | return (
40 |
41 |
42 |
43 | {`Level: ${alphabet[levelIndex]}`}
44 |
45 |
46 | {`Operation(s): ${opIndexes.map((i) => operations[i]).join()}`}
47 |
48 |
49 |
50 |
51 | {`Time Left: ${timeLeft} seconds`}
52 |
53 |
54 | {`Questions Remaining: ${questionsRemaining}`}
55 |
56 |
57 |
58 |
71 |
88 | {
89 | layout.map((lay) => (
90 |
91 | {
92 | lay.slice(1).map((item) => {
93 | const [content, title, click, key] = item;
94 | return (
95 |
96 | this.onClick(click)}
99 | style={buttonStyle}
100 | >
101 | {content}
102 |
103 |
104 | );
105 | })
106 | }
107 |
108 | ))
109 | }
110 |
5 |
13 |
21 | 1
22 |
23 |
31 | +
32 |
33 |
41 | 1
42 |
43 |
51 | =
52 |
53 |
82 |
105 |
108 |
115 |
119 | Check Answer
120 |
121 |
122 |
123 |
136 | Ready for your first answer...
137 |
138 |
139 |
149 | Current Speed 1.1 and Record 1
150 |
151 |
152 |
153 |
41 | );
51 |
52 | const finishedBadge = component.toJSON();
53 | expect(finishedBadge).toMatchSnapshot();
54 | });
55 |
56 | test('should render when there is a single correct result', () => {
57 | const previousResults = [{
58 | actuals: [10],
59 | id: 1,
60 | task: [5, 5, 0, 10],
61 | timeTaken: 2.2,
62 | }];
63 | const resultInfo = {
64 | text: 'Result Info Text',
65 | newRecordInfo: RECORD_NEW,
66 | };
67 |
68 | const component = renderer.create(
69 |
70 | );
80 |
81 | const finishedBadge = component.toJSON();
82 | expect(finishedBadge).toMatchSnapshot();
83 | });
84 |
85 | test('should render when there is a mix of correct and incorrect results', () => {
86 | const previousResults = [{
87 | actuals: [5], // single incorrect
88 | id: 1,
89 | task: [5, 5, 0, 10],
90 | timeTaken: 2.2,
91 | }, {
92 | actuals: [10], // single correct
93 | id: 2,
94 | task: [5, 5, 0, 10],
95 | timeTaken: 2.2,
96 | }, {
97 | actuals: [10, 5, 4, 3], // correct with some wrong
98 | id: 3,
99 | task: [5, 5, 0, 10],
100 | timeTaken: 2.2,
101 | }];
102 | const resultInfo = {
103 | text: 'Result Info Text',
104 | newRecordInfo: RECORD_NEW,
105 | };
106 | db.getScores.mockReturnValueOnce([{
107 | key: '0-01',
108 | timePerQuestion: 2,
109 | }, {
110 | key: '0-02',
111 | timePerQuestion: 0.5,
112 | }, {
113 | key: '0-01',
114 | timePerQuestion: 1,
115 | }]);
116 |
117 | const component = renderer.create(
118 |
119 | );
129 |
130 | const finishedBadge = component.toJSON();
131 | expect(finishedBadge).toMatchSnapshot();
132 | });
133 | });
134 |
--------------------------------------------------------------------------------
/src/learn/help/index.jsx:
--------------------------------------------------------------------------------
1 | const React = require('react');
2 | const ReactMarkdown = require('react-markdown');
3 |
4 | const input = `
5 | ### Help with Math Drill
6 |
7 | #### Options
8 |
9 | Configure the options for the test. These options get saved in your browser \
10 | so if you visit this page again with the same browser then the settings \
11 | will be as you last left them.
12 |
13 | The scores and badges are also saved in the browser. There is no server or \
14 | database for this app. Everything happens on your device and in the browser \
15 | and that's where all the data lives as well. If you use a different browser \
16 | you will start from fresh. If you share your browser with somebody they'll have \
17 | your settings and scores.
18 |
19 | ##### Level
20 |
21 | There are 26 levels from A to Z. If you select a different level the previous \
22 | one will be deselected. All levels are cumulative meaning that, for example \
23 | on level E you will also get questions from levels A through D. The questions \
24 | are randomly weighted towards the higher level you select. That means that \
25 | if you select level E there will probably be more questions from this level \
26 | than level D and there will be more from level D than from C etc.
27 |
28 | ##### Operation
29 |
30 | The four operators Addition, Subtraction, Multiplication and Division can be \
31 | selected in any combination. At least one of them needs to be selected and all \
32 | four can be selected as well.
33 |
34 | Because all Operations can be selected and because the Levels are cumulative you \
35 | can get all four operations with all levels by selecting all the Operators and \
36 | Level Z.
37 |
38 | ##### Time
39 |
40 | The time is expressed in minutes and will stop the test after this time period \
41 | has elapsed. Fractions of a minute can be used to refine the time. Time is not \
42 | really important if you are collecting badges (see below) because average time \
43 | becomes the deciding factor so setting this to a high value is okay.
44 |
45 | ##### Total Questions
46 |
47 | This is the total number of questions that will be asked. The test will end \
48 | once this number of questions have been correctly answered. If a question is not \
49 | correctly answered then the test will remain on that question until it is \
50 | complete.
51 |
52 | If you want to collect badges for completed tests you must answer at least ten \
53 | questions in each test.
54 |
55 | ##### Keyboard
56 |
57 | If you're doing this on a touch device like a smart phone or tablet the the \
58 | onscreen keyboard is the easiest to use. It's a simple keyboard that has all
59 | the functionality you need.
60 |
61 | If you doing this from a desktop computer or laptop then switching this off \
62 | is probably going to be easier.
63 |
64 | Try them both and see which one works best for you.
65 |
66 | ##### Large Keyboard
67 |
68 | This will only show up if you have selected "onscreen keyboard." Selecting \
69 | this option will increase the size of the onscreen keyboard. It seems to \
70 | make it easier for kids to use a larger keyboard sometimes.
71 |
72 | ##### Your Name
73 |
74 | This is entirely optional.
75 |
76 | ### Running
77 |
78 | Once you start running the test you will see the Level, Operation(s) \
79 | Time Left and Questions Remaining at the top of the screen.
80 |
81 | The current question will be presented right below that with a ? in a green \
82 | box where the answer will go.
83 |
84 | Answering a question correctly will advance to the next question until they \
85 | are all completed or until time runs out.
86 |
87 | After you have started answering questions two more pieces of information \
88 | will be presented under the question. The result of the previous question \
89 | you answered and your current speed versus the record (if there is one).
90 |
91 | ### Finished
92 |
93 | Once you have completed answering all your questions you'll see the results \
94 | on the Finished page.
95 |
96 | If you have earned a new badge you will see that here as well.
97 |
98 | There is also a summary of the question you answered quickest, slowest and \
99 | all your results if you want to review them.
100 |
101 | # Scoreboard
102 |
103 | The scoreboard is fairly obvious.
104 |
105 | There is a summary at the top showing all the badges you have earned.
106 |
107 | Below that is a table showing badges by level and operation.
108 |
109 | For now badges are only awarded for single-operation tests.
110 | `;
111 |
112 | function help() {
113 | return (
114 |
6 | Help with Math Drill
7 | ,
8 |
9 | Options
10 | ,
11 |
12 | 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.
13 |
,
14 |
15 | 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 your settings and scores.
16 |
,
17 |
18 | Level
19 | ,
20 |
21 | 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.
22 |
,
23 |
24 | Operation
25 | ,
26 |
27 | 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.
28 |
,
29 |
30 | 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.
31 |
,
32 |
33 | Time
34 | ,
35 |
36 | 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.
37 |
,
38 |
39 | Total Questions
40 | ,
41 |
42 | 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.
43 |
,
44 |
45 | If you want to collect badges for completed tests you must answer at least ten questions in each test.
46 |
,
47 |
48 | Keyboard
49 | ,
50 |
51 | 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
52 | the functionality you need.
53 |
,
54 |
55 | If you doing this from a desktop computer or laptop then switching this off is probably going to be easier.
56 |
,
57 |
58 | Try them both and see which one works best for you.
59 |
,
60 |
61 | Large Keyboard
62 | ,
63 |
64 | 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 make it easier for kids to use a larger keyboard sometimes.
65 |
,
66 |
67 | Your Name
68 | ,
69 |
70 | This is entirely optional.
71 |
,
72 |
73 | Running
74 | ,
75 |
76 | Once you start running the test you will see the Level, Operation(s) Time Left and Questions Remaining at the top of the screen.
77 |
,
78 |
79 | The current question will be presented right below that with a ? in a green box where the answer will go.
80 |
,
81 |
82 | Answering a question correctly will advance to the next question until they are all completed or until time runs out.
83 |
,
84 |
85 | 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).
86 |
,
87 |
88 | Finished
89 | ,
90 |
91 | Once you have completed answering all your questions you'll see the results on the Finished page.
92 |
,
93 |
94 | If you have earned a new badge you will see that here as well.
95 |
,
96 |
97 | There is also a summary of the question you answered quickest, slowest and all your results if you want to review them.
98 |
,
99 |
100 | Scoreboard
101 | ,
102 |
103 | The scoreboard is fairly obvious.
104 |
,
105 |
106 | There is a summary at the top showing all the badges you have earned.
107 |
,
108 |
109 | Below that is a table showing badges by level and operation.
110 |
,
111 |
112 | For now badges are only awarded for single-operation tests.
113 |
,
114 | ]
115 | `;
116 |
--------------------------------------------------------------------------------
/src/learn/math/drill/score-bar.jsx:
--------------------------------------------------------------------------------
1 | const PropTypes = require('prop-types');
2 | const React = require('react');
3 | const moment = require('moment');
4 | const constants = require('../../common/constants');
5 | const helper = require('./helper');
6 |
7 | const {
8 | BADGE_BOUNDARIES: badgeBoundaries,
9 | COLOR_HTML: htmlColors,
10 | COLOR_TEXT: colorText,
11 | } = constants;
12 |
13 | const sbStyleBase = {
14 |
15 | };
16 |
17 | const sbHeadStyleBase = {
18 | width: '100%',
19 | border: '1px solid black',
20 | display: 'flex',
21 | textAlign: 'left',
22 | };
23 |
24 | const sbHeadItemStyleBase = {
25 | flexGrow: '1',
26 | };
27 |
28 | const sbBodyStyleBase = {
29 | width: '100%',
30 | border: '1px solid black',
31 | display: 'flex',
32 | };
33 |
34 | const sbBodyItemStyleBase = {
35 | border: '1px solid black',
36 | display: 'flex',
37 | flexDirection: 'column',
38 | fontSize: 'large',
39 | height: '100%',
40 | flexGrow: '1',
41 | textAlign: 'center',
42 | };
43 |
44 | function renderColors(times, maxVal) {
45 | const sbBodyItemStyle = { ...sbBodyItemStyleBase, height: `${maxVal * 50}px` };
46 |
47 | const extra = badgeBoundaries.concat(maxVal);
48 | const widths = extra.reduce((acc, boundary, index) => {
49 | if (index !== badgeBoundaries.length) {
50 | acc.push(Math.round((100 * (extra[index + 1] - boundary)) / maxVal));
51 | }
52 | return acc;
53 | }, []);
54 |
55 | return (
56 |
57 | {
58 | colorText.map((color, index) => {
59 | const style = {
60 | backgroundColor: htmlColors[index],
61 | height: `${widths[index]}%`,
62 | };
63 | return (
64 |
68 | {color}
69 |
70 | );
71 | })
72 | }
73 |
74 | );
75 | }
76 |
77 | function renderUserScores(times, maxVal) {
78 | return times.map((time) => {
79 | const { timePerQuestion, date } = time;
80 | const sbBodyItemStyle = { ...sbBodyItemStyleBase, height: `${maxVal * 50}px` };
81 | const timePerQuestionLimit = Math.min(maxVal, timePerQuestion);
82 |
83 | const one = Math.min(95, ((timePerQuestionLimit * 100) / maxVal) - 5).toFixed(1);
84 | const three = Math.max(0, (((maxVal - timePerQuestionLimit) * 100) / maxVal) - 5).toFixed(1);
85 | const userTimes = [
86 | one,
87 | 10,
88 | three,
89 | ];
90 |
91 | const rightArrow = '\u21FE';
92 | const downArrow = '\u2193';
93 | const arrow = timePerQuestion > timePerQuestionLimit
94 | ? downArrow : rightArrow;
95 |
96 | const userTimeText = ['', `YOU${arrow}`, ''];
97 |
98 | const userColor = helper.getBadgeHtmlColor(timePerQuestion);
99 |
100 | return (
101 |
102 | {
103 | userTimes.map((userTime, index) => {
104 | const key = `userTimes-${index}`;
105 | const style = {
106 | height: `${userTime}%`,
107 | };
108 | if (index === 1) {
109 | style.backgroundColor = userColor;
110 | }
111 | return (
112 |
113 | {userTimeText[index]}
114 |
115 | );
116 | })
117 | }
118 |
119 | );
120 | });
121 | }
122 |
123 | function renderTitles(times) {
124 | const titles = times.map(({ date }) => ({
125 | title: moment(date).fromNow(),
126 | date,
127 | })).concat({ title: 'Badges', date: 0 });
128 |
129 | return (
130 |
131 | {
132 | titles.map(({ title, date }) => (
133 |
134 | {title}
135 |
136 | ))
137 | }
138 |
139 | );
140 | }
141 |
142 | function scoreBar({ times, showScoreBar }) {
143 | if (!showScoreBar || !times.length) {
144 | return null;
145 | }
146 |
147 | const boundaryMax = Math.max(...badgeBoundaries);
148 | const maxTimePerQuestion = Math.max(...times.map((time) => time.timePerQuestion));
149 | const maxVal = maxTimePerQuestion > (boundaryMax * 1.5)
150 | ? boundaryMax * 2
151 | : boundaryMax * 1.5;
152 |
153 | const sbBodyStyle = { ...sbBodyStyleBase, height: `${maxVal * 50}px` };
154 |
155 | return (
156 |
157 |
158 | {renderTitles(times)}
159 |
160 |
161 | {renderUserScores(times, maxVal)}
162 | {renderColors(times, maxVal)}
163 |
164 |
53 | {`Unknown newRecordInfo ${newRecordInfo} in switch case`}
54 |
55 | );
56 | }
57 | return (
58 |
59 | {text}
60 |
61 | );
62 | }
63 |
64 | function finished(props) {
65 | const { levelIndex: propsLevelIndex, opIndexes: propsOpIndexes } = props;
66 | const {
67 | levelIndex,
68 | opIndexes,
69 | previousResults,
70 | resultInfo,
71 | scoreBarTimes = helper.getScoreBarTimes(propsLevelIndex, propsOpIndexes),
72 | timeAllowed,
73 | timeLeft,
74 | totalProblems,
75 | } = props;
76 |
77 | const crunchedResults = PreviousResults.getStats(previousResults);
78 |
79 | const {
80 | incorrects,
81 | correctCount,
82 | longestTime: long,
83 | shortestTime: short,
84 | totalTime,
85 | } = crunchedResults;
86 |
87 | const longestTime = long ? [long] : [];
88 | const shortestTime = short ? [short] : [];
89 | const timePerQuestion = parseFloat((totalTime / correctCount).toFixed(1));
90 |
91 | const slowSort = PreviousResults.sortBySlowest(previousResults);
92 |
93 | if (!longestTime.length) {
94 | return (
95 |
96 |
97 | Finished
98 |
99 |
100 | {'Looks like you didn\'t get a chance to do anything that round!'}
101 |
102 |
108 |
109 | Finished
110 |
111 | {processResultInfo(resultInfo)}
112 |
118 |
9}
121 | />
122 |
123 | {`You had ${timeLeft} seconds left out of the ${timeAllowed} seconds allowed.`}
124 |
125 |
126 | {`You correctly answered ${correctCount} of the ${totalProblems} problems.`}
127 |
128 |
129 | The problem that took you the longest to answer
130 |
131 |
133 | The problem you answered the fastest
134 |
135 |
139 |
140 | The ones that you got wrong
141 |
142 |
146 | How you did (sorted by slowest)
147 |
148 |
5 |
61 |
94 |
133 |
172 |
59 |
60 |
61 | Level
62 |
63 |
64 | {
65 | alphabet.map((letter, index) => (
66 |
67 | setParentState({ levelIndex: index })}
70 | color={index === levelIndex ? 'secondary' : 'primary'}
71 | style={buttonStyle}
72 | >
73 | {letter}
74 |
75 |
76 | ))
77 | }
78 |
79 |
80 |
81 |
82 | Operation
83 |
84 |
85 | {
86 | operations.map((operation, index) => (
87 |
88 | toggleOpIndex(index)}
91 | color={opIndexes.includes(index) ? 'secondary' : 'primary'}
92 | style={buttonStyle}
93 | >
94 | {operation}
95 |
96 |
97 | ))
98 | }
99 |
100 |
101 |
102 |
103 | Time
104 |
105 |
116 |
117 |
118 | Total Questions (you only get badges for 10 or more correct questions)
119 |
120 |
131 |
132 |
133 | Keyboard
134 |
135 |
136 |
148 |
149 | {onscreenKeyboard
150 | && (
151 |
152 |
153 | Large Keyboard
154 |
155 |
156 |
168 |
169 | )}
170 |
171 |
172 | Your Name (Optional)
173 |
174 |
185 |
186 |
187 | Start
188 |
190 |
191 |
192 |
5 |
6 | Scoreboard
7 |
8 |
9 |
10 |
33 |
36 | 0
37 |
38 |
39 |
40 | Gold Badge(s) - 2 seconds or less (per question)
41 |
42 |
43 |
44 |
67 |
70 | 0
71 |
72 |
73 |
74 | Silver Badge(s) - between 2 and 3 seconds (per question)
75 |
76 |
77 |
78 |
101 |
104 | 0
105 |
106 |
107 |
108 | Bronze Badge(s) - between 3 and 4 seconds (per question)
109 |
110 |
111 |
112 |
135 |
138 | 1
139 |
140 |
141 |
142 | Blue Badge(s) - more than 4 seconds (per question)
143 |
144 |
145 |
146 |
154 |
157 |
160 |
163 |
168 | Level
169 |
170 |
175 | Addition
176 |
177 |
178 |
179 |
182 |
185 |
190 | A
191 |
192 |
196 |
197 |
220 |
223 | 1
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
124 |
125 | {recordText}
126 |
127 |
146 | {'Ready for your first answer...'}
147 |
148 | );
149 | }
150 | const { actuals, task } = lastResult;
151 | const [actual] = actuals;
152 | const [,,, answer] = task;
153 |
154 | const borderStyle = answer === actual
155 | ? lastResultCorrectStyle
156 | : lastResultIncorrectStyle;
157 |
158 | return (
159 |
160 |
162 | );
163 | }
164 |
165 | render() {
166 | const { answer } = this.state;
167 | const { onscreenKeyboard, problem, largeKeyboard } = this.props;
168 | const [left, right, opIndex] = problem;
169 | const operator = operations[opIndex];
170 | return (
171 |
172 |
173 |
174 | {left}
175 |
176 |
177 | {operator}
178 |
179 |
180 | {right}
181 |
182 |
183 | =
184 |
185 | {
186 | onscreenKeyboard
187 | ? (
188 |
189 | {answer || '?'}
190 |
191 | )
192 | : (
193 |
209 |
212 | )
213 | }
214 |
215 | {this.renderLastResult()}
216 | {this.renderNewRecord()}
217 |
218 |
224 |
5 |
133 |
134 |
190 |
223 |
262 |
301 |
302 |
11 |
21 |
31 |
38 | 4 minutes ago
39 |
40 |
47 | Badges
48 |
49 |
50 |
51 |
61 |
74 |
81 |
82 |
83 |
91 | YOU⇾
92 |
93 |
100 |
101 |
102 |
103 |
116 |
124 | Gold
125 |
126 |
134 | Silver
135 |
136 |
144 | Bronze
145 |
146 |
154 | Blue
155 |
156 |
157 |
158 |
165 |
175 |
185 |
192 | 4 minutes ago
193 |
194 |
201 | Badges
202 |
203 |
204 |
205 |
215 |
228 |
235 |
236 |
237 |
245 | YOU↓
246 |
247 |
254 |
255 |
256 |
257 |
270 |
278 | Gold
279 |
280 |
288 | Silver
289 |
290 |
298 | Bronze
299 |
300 |
308 | Blue
309 |
310 |
311 |
312 |
319 |
329 |
339 |
346 | 4 minutes ago
347 |
348 |
355 | 2 minutes ago
356 |
357 |
364 | a few seconds ago
365 |
366 |
373 | Badges
374 |
375 |
376 |
377 |
387 |
400 |
407 |
408 |
409 |
417 | YOU↓
418 |
419 |
426 |
427 |
428 |
429 |
442 |
449 |
450 |
451 |
459 | YOU↓
460 |
461 |
468 |
469 |
470 |
471 |
484 |
491 |
492 |
493 |
501 | YOU⇾
502 |
503 |
510 |
511 |
512 |
513 |
526 |
534 | Gold
535 |
536 |
544 | Silver
545 |
546 |
554 | Bronze
555 |
556 |
564 | Blue
565 |
566 |
567 |
568 |