Merge pull request #58 from skwirowski/34-answers-on-question

[#34] Answers On Question (#58)

src/app/App.js

@@ -4,6 +4,9 @@ import { gameMode } from './gameMode'
 import { redButton } from './redButton'
 import { imageRecognizer } from './imageRecognizer'
 import { mainMenu } from './components/mainMenu'
+<<<<<<< HEAD
+import { answersOnQuestion } from './components/answersOnQuestion'
+=======
 import { startTime } from './logic/timer'
 import { generateQuestion } from './logic/generatingQuestions/generateQuestion'
 import { modalGameOver } from './components/modalGameOver';
@@ -67,16 +70,30 @@ const testDataComputer = {
   total: 2,
 };
 
+>>>>>>> main
 
 const getData = (element) => {
   return element;
 };
 
+<<<<<<< HEAD
+export const App = ({options}) => {
+    gameMode('Who is this Character?')
+    redButton('play the game');
+    imageRecognizer('c3RhdGljL2Fzc2V0cy9pbWcvbW9kZXMvcGVvcGxlLzM2LmpwZw==')
+    const getData = (element) => {
+      return element;
+    };
+    mainMenu(document.querySelector('.swquiz-header'), getData);
+    answersOnQuestion(['Luke', 'Angel', 'Becka', 'John'], 'Luke');
+}
+=======
 const modalSubmitCallback = (e) => {
   e.preventDefault();
   console.log('MAY THE FORCE BE WITH YOU!');
   document.querySelector('.swquiz-modal').style.display = 'none';
 };
+>>>>>>> main
 
 export const App = ({ options }) => {
   gameMode('Who is this Character?');

src/app/components/answersOnQuestion.js

@@ -0,0 +1,40 @@
+export const answersOnQuestion = (answers, correctAnswer, checkingAnswer) => {
+    const app = document.querySelector('#swquiz-app');
+    const container = document.createElement('div');
+    container.setAttribute('id', 'answers-container');
+    container.setAttribute('data-testid', 'answers-container');
+    container.setAttribute('class', 'container-answers');
+    let chosenAnswer;
+    let ids = ['firstAnswer', 'secondAnswer', 'thirdAnswer', 'fourthAnswer'];
+    let buttons = ids.map((idString, index) => {
+      let button = document.createElement('input');
+      button.setAttribute('type', 'button');
+      button.setAttribute('id', idString);
+      button.setAttribute('data-testid', idString);
+      button.setAttribute('class', 'button button--lighter');
+      button.setAttribute('value', `${answers[index]}`);
+      return button;
+    });
+    buttons.forEach((element) => {
+      container.appendChild(element);
+    });
+    app.appendChild(container);
+
+    const chosenButton = document.getElementById('answers-container').querySelectorAll('.button--lighter');
+
+    for(let i = 0; i < chosenButton.length; i++) {
+        chosenButton[i].onclick = checkingAnswer = () => {
+            console.log(chosenButton[i].value)
+            chosenAnswer = chosenButton[i].value;
+            console.log(correctAnswer === chosenAnswer);
+            if(correctAnswer === chosenAnswer) {
+                chosenButton[i].classList.add('button--correct');
+                window.setTimeout('window.location.reload()', 500);
+            } else {
+                chosenButton[i].classList.add('button--wrong');
+                window.setTimeout('window.location.reload()', 500);
+            }
+        }
+    }
+
+}

styles/App.scss

@@ -2,10 +2,16 @@
 @import './components/gameHeader.scss';
 @import './components/mainMenu.scss';
 @import './components/image.scss';
+<<<<<<< HEAD:styles/App.css
+@import './components/redButton.css';
+@import './components/answersOnQuestion.scss';
+
+=======
 @import './components/redButton.scss';
 @import './components/modalGameOver.scss';
 @import './components/ranking.scss';
 @import './components/timeLeftText.scss';
+>>>>>>> main:styles/App.scss
 
 :root {
   --border-radius: 15px;
@@ -21,6 +27,7 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  outline: none;
 }
 
 body {

styles/components/answersOnQuestion.scss

@@ -0,0 +1,11 @@
+.container-answers {
+    display: grid;
+    width: 1200px;
+    min-height: 350px;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 100px 100px; 
+    column-gap: 50px;
+    row-gap: 50px;
+    justify-content: center;
+    margin: 50px;
+}

styles/components/redButton.css

@@ -0,0 +1,38 @@
+.button {
+    border-radius: 16px;
+    font-size: 42px;
+    font-weight: 500;
+    height: 100px;
+    line-height: 51.2px;
+    width: 600px;
+}
+
+.button--red {
+    background: rgba(255, 0, 0, 0.8);
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    color: #fff;
+}
+
+.button--uppercase {
+    text-transform: uppercase;
+}
+
+.button--lighter {
+    font-weight: 400;
+}
+
+.button--lighter:hover {
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 4px 4px rgba(0, 0, 0, 0.25);
+}
+
+.button--wrong {
+    font-weight: 600;
+    background: #FF0000;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 30px #FF0000;
+}
+
+.button--correct {
+    font-weight: 600;
+    background: #41ED25;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 30px #51FC00;
+}

test/answersOnQuestion.test.js

@@ -0,0 +1,34 @@
+import { answersOnQuestion } from '../src/app/components/answersOnQuestion';
+import { fireEvent, screen } from '@testing-library/dom';
+import '@testing-library/jest-dom/extend-expect';
+
+
+test('div has class - container-answers', () => {
+  document.body.innerHTML = `<div id="swquiz-app"></div>`;
+  answersOnQuestion(['Luke', 'Angel', 'Becka', 'John'], 'Luke');
+  expect(screen.getByTestId('answers-container')).toHaveClass('container-answers');
+});
+
+test('div has buttons inside', () => {
+    document.body.innerHTML = `<div id="swquiz-app"></div>`;
+    answersOnQuestion(['Luke', 'Angel', 'Becka', 'John'], 'Luke');
+    expect(screen.getByTestId('answers-container')).not.toBeEmptyDOMElement(); 
+});
+
+test('Correct answer was cliked', () => {
+    document.body.innerHTML = `<div id="swquiz-app"></div>`;
+    answersOnQuestion(['Luke', 'Angel', 'Becka', 'John'], 'Luke');
+    const button = document.getElementById('firstAnswer');
+    fireEvent.click(button);
+    expect(screen.getByTestId('firstAnswer')).toHaveClass('button button--lighter button--correct'); 
+});
+
+test('Wrong answer was cliked', () => {
+    document.body.innerHTML = `<div id="swquiz-app"></div>`;
+    answersOnQuestion(['Luke', 'Angel', 'Becka', 'John'], 'John');
+    const button = document.getElementById('firstAnswer');
+    fireEvent.click(button);
+    expect(screen.getByTestId('firstAnswer')).toHaveClass('button button--lighter button--wrong'); 
+});
+
+