\r\n
\r\n );\r\n};\r\n\r\nexport default QuizzOption;\r\n\r\n","import React, { useState } from 'react';\r\nimport QuizzOption from \"./QuizzOption\";\r\n\r\nconst QuizzQuestion = ({ id, question, options, onOptionSelect, selectedOptionId }) => {\r\n\r\n return (\r\n \r\n onOptionSelect(id)} />\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default QuizzQuestion;\r\n\r\n","import axios from \"axios\";\r\nimport config from \"../../config/config\";\r\n\r\nconst getQuizz = async (quizId, quizCulture) => {\r\n const request = axios.get(\r\n `${config.blendAppBaseUrl}/getquiz/${quizId}/${quizCulture}`\r\n );\r\n try {\r\n const response = await request;\r\n return response.data.questions;\r\n } catch (error) {\r\n throw new Error(error);\r\n }\r\n};\r\n\r\nconst postQuizz = async (quizId, quizCulture, quizData) => {\r\n const request = axios.post(`${config.blendAppBaseUrl}/results/${quizId}/${quizCulture}`, quizData, {\r\n headers: {\r\n //\"content-type\": \"multipart/form-data\",\r\n \"content-type\": \"application/json\"\r\n },\r\n });\r\n try {\r\n const response = await request;\r\n return response.data;\r\n } catch (error) {\r\n throw new Error(error);\r\n }\r\n};\r\n\r\nexport { getQuizz, postQuizz };\r\n","import React, { useContext, useEffect, useState } from \"react\";\r\nimport QuizzQuestion from \"../components/QuizzQuestion\";\r\nimport { BlendAppQuizzDataContext } from \"../contexts/blendAppQuizzData-context\";\r\nimport { getQuizz, postQuizz } from \"../services/blendAppService\";\r\n\r\nlet backToHomepageLink, backToHomepageText, yourResultsText, startAgainText, backBtnText, nextBtnText, finishBtnText, shareText;\r\n\r\nconst BlendAppLayoutContainer = () => {\r\n const [blendAppQuizzData, dispatchToBlendAppQuizzData] = useContext(BlendAppQuizzDataContext);\r\n const [quizz, setQuizz] = useState([]);\r\n const [activeQuizzItemIndex, setActiveQuizzItemIndex] = useState(0);\r\n const [selectedOptionId, setSelectedOptionId] = useState(null);\r\n const [isFinished, setIsFinished] = useState(false);\r\n const [result, setResult] = useState(null);\r\n \r\n\r\n const fetchData = async () => {\r\n const quizId = document.getElementById('blendAppQuizzId').value;\r\n const quizCulture = document.getElementById('blendAppCulture').value;\r\n const quizz = await getQuizz(quizId, quizCulture);\r\n setQuizz(quizz);\r\n };\r\n\r\n const postData = async () => {\r\n const quizId = document.getElementById('blendAppQuizzId').value;\r\n const quizCulture = document.getElementById('blendAppCulture').value;\r\n const result = await postQuizz(quizId, quizCulture, {answers: blendAppQuizzData});\r\n setResult(result);\r\n if (window.matchMedia('(max-width: 639px)').matches) window.scrollTo(0, 0);\r\n };\r\n\r\n useEffect(() => {\r\n fetchData();\r\n backToHomepageLink = document.getElementById('backToHomepageLink').value;\r\n backToHomepageText = document.getElementById('backToHomepageText').value;\r\n yourResultsText = document.getElementById('yourResultsText').value;\r\n startAgainText = document.getElementById('startAgainText').value;\r\n backBtnText = document.getElementById('backBtnText').value;\r\n nextBtnText = document.getElementById('nextBtnText').value;\r\n finishBtnText = document.getElementById('finishBtnText').value;\r\n shareText = document.getElementById('ShareText').value;\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (isFinished) postData();\r\n }, [isFinished]);\r\n\r\n useEffect(() => {\r\n const activeQuizzDataItem = blendAppQuizzData.find(\r\n (quizzDataItem) => quizzDataItem.questionId === quizz[activeQuizzItemIndex].id\r\n );\r\n const selectedOptionId = activeQuizzDataItem ? activeQuizzDataItem.answerId : null;\r\n setSelectedOptionId(selectedOptionId);\r\n }, [activeQuizzItemIndex, blendAppQuizzData]);\r\n\r\n const prev = () => {\r\n setActiveQuizzItemIndex(activeQuizzItemIndex - 1)\r\n }\r\n\r\n const next = () => {\r\n setActiveQuizzItemIndex(activeQuizzItemIndex + 1)\r\n if (window.matchMedia('(max-width: 639px)').matches) window.scrollTo(0, 0);\r\n }\r\n\r\n const onOptionSelect = (optionId) => {\r\n setSelectedOptionId(optionId);\r\n dispatchToBlendAppQuizzData({\r\n type: 'ADD_ANSWER',\r\n payload: {\r\n questionId: quizz[activeQuizzItemIndex].id,\r\n answerId: optionId\r\n }\r\n });\r\n\r\n // logic to switch to next question on answer click\r\n if (activeQuizzItemIndex < quizz.length - 1) {\r\n setActiveQuizzItemIndex(activeQuizzItemIndex + 1)\r\n } else {\r\n setIsFinished(true)\r\n }\r\n \r\n }\r\n\r\n const getEmbedVideoUrl = (videoUrl) => {\r\n let videoId = videoUrl.split('v=')[1];\r\n var ampersandPosition = videoId.indexOf('&');\r\n if(ampersandPosition != -1) {\r\n videoId = videoId.substring(0, ampersandPosition);\r\n }\r\n return `https://www.youtube.com/embed/${videoId}`;\r\n }\r\n\r\n const resetAnswers = () => {\r\n setActiveQuizzItemIndex(0);\r\n setIsFinished(false);\r\n dispatchToBlendAppQuizzData({type: 'RESET_ANSWERS'});\r\n setResult(null);\r\n if (window.matchMedia('(max-width: 639px)').matches) window.scrollTo(0, 0);\r\n }\r\n\r\n const popUpWindow = (url, width, height) => {\r\n const dualScreenLeft = window.screenLeft;\r\n const dualScreenTop = window.screenTop;\r\n const windowWidth = window.innerWidth\r\n ? window.innerWidth\r\n : document.documentElement.clientWidth;\r\n const windowHeight = window.innerHeight\r\n ? window.innerHeight\r\n : document.documentElement.clientHeight;\r\n const leftPosition = windowWidth / 2 - width / 2 + dualScreenLeft;\r\n const topPosition = windowHeight / 2 - height / 2 + dualScreenTop;\r\n const params = `height=${height},width=${width},left=${leftPosition},top=${topPosition},scrollbars=yes,resizable=yes`;\r\n window.open(url, \"Share\", params);\r\n };\r\n\r\n const socialMediaShare = (e, socialMedia, shareLink) => {\r\n let shareUrl;\r\n if (socialMedia === 'facebook') shareUrl = `https://www.facebook.com/sharer.php?u=${shareLink}`;\r\n if (socialMedia === 'twitter') shareUrl = `https://twitter.com/intent/tweet?url=${shareLink}`;\r\n if (socialMedia === 'linkedin') shareUrl = `https://www.linkedin.com/shareArticle?url=${shareLink}`;\r\n e.preventDefault();\r\n popUpWindow(shareUrl, \"600\", \"600\");\r\n }\r\n \r\n return (\r\n {question}
\r\n \r\n\r\n
\r\n \r\n {options.map(option =>\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default BlendAppLayoutContainer;\r\n","import React from 'react';\r\nimport { Router } from 'react-router-dom';\r\nimport BlendAppLayoutContainer from '../containers/BlendAppLayoutContainer';\r\nimport history from '../history';\r\n\r\nconst BlendAppRouter = () => (\r\n \r\n
\r\n \r\n {!isFinished ?\r\n <>\r\n
\r\n \r\n \r\n {activeQuizzItemIndex + 1 > 9 ? activeQuizzItemIndex + 1 : `0${activeQuizzItemIndex + 1}` }\r\n \r\n /\r\n {quizz.length > 9 ? quizz.length : `0${quizz.length}` }\r\n
\r\n {quizz.map((quizzItem, index) => index === activeQuizzItemIndex &&\r\n \r\n
\r\n }\r\n {yourResultsText}
\r\n \r\n\r\n {result &&\r\n
\r\n {result &&\r\n \r\n {result.image &&\r\n
\r\n }\r\n \r\n 
\r\n
\r\n }\r\n {result.video &&\r\n \r\n
\r\n }\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n {result.title}
\r\n \r\n {(result.linkUrl && result.linkText) &&\r\n \r\n {result.linkText}\r\n \r\n \r\n }\r\n\r\n
\r\n }\r\n {shareText}
\r\n socialMediaShare(e, 'twitter', result.shareLink)} className=\"social-media-icon social-media-icon--small\">\r\n \r\n \r\n socialMediaShare(e, 'facebook', result.shareLink)} className=\"social-media-icon social-media-icon--small\">\r\n \r\n \r\n socialMediaShare(e, 'linkedin', result.shareLink)} className=\"social-media-icon social-media-icon--small\">\r\n \r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n {isFinished ? \r\n <>\r\n \r\n \r\n {backToHomepageText}\r\n \r\n \r\n \r\n :\r\n <>\r\n {activeQuizzItemIndex !== 0 && \r\n \r\n }\r\n {(selectedOptionId && activeQuizzItemIndex <= blendAppQuizzData.length - 1) &&\r\n \r\n }\r\n \r\n }\r\n
\r\n