Skip to content

💡Good to provide incorrect answers at the end of the game #66

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

💡Good to provide incorrect answers at the end of the game #66

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
20ab736
refactor: remove answerId as uuid is the same
Beraliv May 2, 2019
7aaa3dd
refactor: return component for Code
Beraliv May 2, 2019
14a2f34
prod: add 2 components: IncorrectAnswers & IncorrectCode
Beraliv May 2, 2019
a050803
refactor: generate answers with variants and save them in store
Beraliv May 2, 2019
0f40fcc
prod: add block with incorrect answers
Beraliv May 2, 2019
937bffe
styles: remove overriding in favour to buttonBackground & buttonBackg…
Beraliv May 2, 2019
179d7c5
refactor: export answers
Beraliv May 2, 2019
a8b77eb
tests: add variants & variantUuid
Beraliv May 2, 2019
78de8fb
lint: replace long lines
Beraliv May 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions __tests__/Layout.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ const patterns = [
codeES5: 'Code ES5 - Prototype',
codeES6: 'Code ES6 - Prototype',
answered: false,
answerId: null,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

answerId is same as uuid in the store

correct: null
Copy link
Contributor Author

@Beraliv Beraliv May 2, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡I want to discuss the field correct as it is now computed as uuid === variantUuid 💡

},

Expand All @@ -29,7 +28,6 @@ const patterns = [
codeES5: 'Code ES5 - Singleton',
codeES6: 'Code ES6 - Singleton',
answered: false,
answerId: null,
correct: null
}
];
Expand Down
4 changes: 0 additions & 4 deletions __tests__/middleware/submit.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ const patterns = [
codeES5: 'Code ES5',
codeES6: 'Code ES6',
answered: false,
answerId: null,
correct: null
},

Expand All @@ -23,7 +22,6 @@ const patterns = [
codeES5: 'Code ES5',
codeES6: 'Code ES6',
answered: false,
answerId: null,
correct: null
}
];
Expand All @@ -45,7 +43,6 @@ describe('Submit middleware', () => {
payload: {
currentIndex: 0,
recentlyAnswered: {
answerId: 'abc123',
answered: true,
correct: true,
name: 'Prototype',
Expand All @@ -54,7 +51,6 @@ describe('Submit middleware', () => {
},
remainingPatterns: [
{
answerId: null,
answered: false,
codeES5: 'Code ES5',
codeES6: 'Code ES6',
Expand Down
4 changes: 0 additions & 4 deletions __tests__/pages/Game.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ const patterns = [
codeES5: 'Code ES5 - Prototype',
codeES6: 'Code ES6 - Prototype',
answered: false,
answerId: null,
correct: null
},

Expand All @@ -30,7 +29,6 @@ const patterns = [
codeES5: 'Code ES5 - Singleton',
codeES6: 'Code ES6 - Singleton',
answered: false,
answerId: null,
correct: null
}
];
Expand Down Expand Up @@ -161,7 +159,6 @@ describe('Game page - RESULTS', () => {
codeES5: 'Code ES5 - Prototype',
codeES6: 'Code ES6 - Prototype',
answered: true,
answerId: 'abc123',
correct: true
},

Expand All @@ -172,7 +169,6 @@ describe('Game page - RESULTS', () => {
codeES5: 'Code ES5 - Singleton',
codeES6: 'Code ES6 - Singleton',
answered: true,
answerId: 'abc123',
correct: false
}
];
Expand Down
8 changes: 0 additions & 8 deletions __tests__/pages/__snapshots__/Game.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ exports[`Game page - GAME - DARK style renders a <Code /> component 1`] = `
<Code
current={
Object {
"answerId": null,
"answered": false,
"codeES5": "Code ES5 - Prototype",
"codeES6": "Code ES6 - Prototype",
Expand Down Expand Up @@ -364,7 +363,6 @@ exports[`Game page - GAME - DARK style renders a <ProgressBar /> component 1`] =
remaining={
Array [
Object {
"answerId": null,
"answered": false,
"codeES5": "Code ES5 - Singleton",
"codeES6": "Code ES6 - Singleton",
Expand Down Expand Up @@ -461,7 +459,6 @@ exports[`Game page - GAME - LIGHT style renders a <Code /> component 1`] = `
<Code
current={
Object {
"answerId": null,
"answered": false,
"codeES5": "Code ES5 - Prototype",
"codeES6": "Code ES6 - Prototype",
Expand Down Expand Up @@ -763,7 +760,6 @@ exports[`Game page - GAME - LIGHT style renders a <ProgressBar /> component 1`]
remaining={
Array [
Object {
"answerId": null,
"answered": false,
"codeES5": "Code ES5 - Singleton",
"codeES6": "Code ES6 - Singleton",
Expand Down Expand Up @@ -987,7 +983,6 @@ exports[`Game page - RESULTS renders a <Percentage /> component 1`] = `
answers={
Array [
Object {
"answerId": "abc123",
"answered": true,
"codeES5": "Code ES5 - Prototype",
"codeES6": "Code ES6 - Prototype",
Expand All @@ -997,7 +992,6 @@ exports[`Game page - RESULTS renders a <Percentage /> component 1`] = `
"uuid": "abc123",
},
Object {
"answerId": "abc123",
"answered": true,
"codeES5": "Code ES5 - Singleton",
"codeES6": "Code ES6 - Singleton",
Expand Down Expand Up @@ -1078,7 +1072,6 @@ exports[`Game page - RESULTS renders a <Result /> component 1`] = `
answers={
Array [
Object {
"answerId": "abc123",
"answered": true,
"codeES5": "Code ES5 - Prototype",
"codeES6": "Code ES6 - Prototype",
Expand All @@ -1088,7 +1081,6 @@ exports[`Game page - RESULTS renders a <Result /> component 1`] = `
"uuid": "abc123",
},
Object {
"answerId": "abc123",
"answered": true,
"codeES5": "Code ES5 - Singleton",
"codeES6": "Code ES6 - Singleton",
Expand Down
3 changes: 0 additions & 3 deletions __tests__/reducers/reducers.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,23 +14,20 @@ const answers = [
type: 'behavioral',
answered: true,
correct: true,
answerId: 'ba2ca6b0-0c86-4573-baf0-60f33ce6e947',
uuid: 'ba2ca6b0-0c86-4573-baf0-60f33ce6e947'
},
{
name: 'Visitor',
type: 'behavioral',
answered: false,
correct: null,
answerId: null,
uuid: 'eb9427c5-0167-4d65-a99b-a5ffadf5fd46'
},
{
name: 'Singleton',
type: 'creational',
answered: false,
correct: null,
answerId: null,
uuid: 'slearknbqarlnbqasOLdnv'
}
];
Expand Down
21 changes: 10 additions & 11 deletions src/components/Button.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,20 +28,19 @@ const StyledButton = styled.button`
}
`;

export const Button = props => {
const { id, label, onClick } = props;

return (
<StyledButton id={id} onClick={onClick}>
{label && <span>{label}</span>}
</StyledButton>
);
};
export const Button = ({ id, label, onClick = () => {}, theme = {} }) => (
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added theme to send the style of the button right in props

<StyledButton id={id} onClick={onClick} theme={theme}>
{label && <span>{label}</span>}
</StyledButton>
);

Button.propTypes = {
label: PropTypes.string.isRequired,
id: PropTypes.string.isRequired,
onClick: PropTypes.func.isRequired
label: PropTypes.string.isRequired,
onClick: PropTypes.func,
theme: PropTypes.shape({
buttonBackground: PropTypes.string
})
};

export default Button;
31 changes: 9 additions & 22 deletions src/components/ButtonContainer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@ import styled from 'styled-components';
import { connect } from 'react-redux';
import Button from './Button';
import { submitAnswer } from '../actions/submitAnswer';
import { getCurrent, getPatterns } from '../selectors';
import { shuffle } from '../helpers/shuffleArray';
import { getCurrent } from '../selectors';

const StyledButtonContainer = styled.div`
align-content: space-around;
Expand All @@ -16,34 +15,22 @@ const StyledButtonContainer = styled.div`
margin: 1rem 0 2rem;
`;

export const ButtonContainer = props => {
const { current, patterns, onSubmitAnswer } = props;

// get 3 random patterns in addition to correct one
const allOtherAnswers = patterns.filter(pattern => pattern.uuid !== current.uuid);
const additional = shuffle(allOtherAnswers).slice(0, 3);
// shuffle the 4 answers
const variants = shuffle([current, ...additional]);

return (
<StyledButtonContainer>
{variants.map(({ uuid, name }) => (
<Button label={name} id={uuid} key={uuid} onClick={() => onSubmitAnswer(uuid)} />
))}
</StyledButtonContainer>
);
};
export const ButtonContainer = ({ current, onSubmitAnswer }) => (
<StyledButtonContainer>
{current.variants.map(({ uuid, name }) => (
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

moved all the logic below

<Button label={name} id={uuid} key={uuid} onClick={() => onSubmitAnswer(uuid)} />
))}
</StyledButtonContainer>
);

ButtonContainer.propTypes = {
patterns: PropTypes.array.isRequired,
current: PropTypes.object.isRequired,
onSubmitAnswer: PropTypes.func.isRequired
};

export default connect(
state => ({
current: getCurrent(state),
patterns: getPatterns(state)
current: getCurrent(state)
}),
{
onSubmitAnswer: id => submitAnswer(id)
Expand Down
32 changes: 14 additions & 18 deletions src/components/Code.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,21 @@ import { getJS, getCurrent } from '../selectors';

SyntaxHighlighter.registerLanguage('javascript', js);

const Code = props => {
const { js, current, style } = props;
export const Code = ({ js, current, style }) => (
<Fragment>
{js === 'es5' && (
<SyntaxHighlighter language="javascript" style={style} className="fixed">
{current.codeES5}
</SyntaxHighlighter>
)}

return (
<Fragment>
{js === 'es5' && (
<SyntaxHighlighter language="javascript" style={style} className="fixed">
{current.codeES5}
</SyntaxHighlighter>
)}

{js === 'es6' && (
<SyntaxHighlighter language="javascript" style={style} className="fixed">
{current.codeES6}
</SyntaxHighlighter>
)}
</Fragment>
);
};
{js === 'es6' && (
<SyntaxHighlighter language="javascript" style={style} className="fixed">
{current.codeES6}
</SyntaxHighlighter>
)}
</Fragment>
);

Code.propTypes = {
js: PropTypes.string.isRequired,
Expand Down
23 changes: 23 additions & 0 deletions src/components/IncorrectAnswers.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { getAnswers, getPatterns } from '../selectors';
import IncorrectCode from './IncorrectCode';

export const IncorrectAnswers = ({ answers, style }) => {
const incorrectAnswers = answers.filter(answer => !answer.correct);

return incorrectAnswers.map(({ uuid }) => (
<IncorrectCode key={uuid} uuid={uuid} style={style} />
));
};

IncorrectAnswers.propTypes = {
answers: PropTypes.array.isRequired,
style: PropTypes.object.isRequired
};

export default connect(state => ({
answers: getAnswers(state),
patterns: getPatterns(state)
}))(IncorrectAnswers);
Loading