{"version":3,"file":"3b466610-d29519efca9b5f6697b1.js","mappings":"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","sources":["webpack://vf-flight-3-q2-2021/./src/components/quiz-fi.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport styled from \"@emotion/styled\";\n// import Wind from \"../assets/images/wind.svg\";\nimport { motion } from \"framer-motion\";\nimport hydrogenQuiz from \"../assets/videos2/hydrogenQuiz.mp4\";\nimport rightAnswerIcon from \"../assets/images/fi-flight5-23/right-answer.png\";\nimport wrongAnswerIcon from \"../assets/images/fi-flight5-23/wrong-answer.png\";\n\nconst Container = styled.div`\n    width: 410px;\n\n    @media screen and (max-width: 990px) {\n        width: 100%;\n    }\n`;\n\nconst Header = styled.div`\n    display: flex;\n    flex-flow: row;\n    align-items: flex-start;\n    margin-bottom: 20px;\n\n    @media screen and (max-width: 990px) {\n        margin-bottom: 0;\n    }\n\n    h2 {\n        line-height: normal;\n        margin-right: 25px;\n\n        @media screen and (max-width: 480px) {\n            margin-right: 0px;\n            margin-bottom: 28px;\n        }\n    }\n\n    .wind {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-flow: column;\n\n        img {\n            width: 100px;\n            animation: spin 6s linear infinite;\n            animation-duration: 6s;\n            transform-origin: 50% 63%;\n            @media screen and (min-width: 990px) {\n                width: 130px;\n            }\n            &.fast {\n                animation-duration: 2.4s;\n            }\n            &.faster {\n                animation-duration: 1.6s;\n            }\n            &.fastest {\n                animation-duration: 1s;\n            }\n        }\n\n        .pole {\n            width: 16px;\n            background: #000;\n            height: 77px;\n            margin-bottom: -20px;\n            position: relative;\n            bottom: 15px;\n            @media screen and (min-width: 990px) {\n                height: 84px;\n                bottom: 19px;\n            }\n        }\n    }\n\n    @keyframes spin {\n        100% {\n            transform: rotate(360deg);\n        }\n    }\n`;\n\nconst Question = styled.div`\n    @media screen and (max-width: 990px) {\n        transform: translateY(-10px);\n    }\n    .question {\n        h4 {\n            margin-bottom: 5px;\n            @media screen and (min-width: 990px) {\n                font-size: 24px;\n                margin-bottom: 10px;\n            }\n        }\n        p {\n            line-height: 28px;\n            &:last-of-type {\n                @media screen and (max-width: 990px) {\n                    line-height: 20px;\n                }\n            }\n        }\n    }\n    .options {\n        margin-top: -10px;\n        .buttons {\n            margin-bottom: 25px;\n            @media screen and (max-width: 990px) {\n                display: flex;\n                margin-bottom: 0px;\n            }\n            button {\n                // background-color: #1964a3;\n                color: white;\n\n                // :active {\n                //     background-color: #2071b5;\n                // }\n                @media screen and (max-width: 990px) {\n                    width: 130px;\n                    min-width: 0;\n                }\n                &:first-of-type {\n                    margin-right: 15px;\n                }\n            }\n        }\n    }\n`;\n\nconst Answer = styled(motion.div)`\n    padding: 20px;\n    border-radius: 4px;\n    background: #f1f1f1;\n    opacity: 0;\n    transform: translateY(0);\n    display: none;\n    @media screen and (max-width: 990px) {\n        margin-top: 20px;\n    }\n    h4 {\n        margin-bottom: 8px;\n    }\n    p {\n        line-height: 28px;\n        margin-bottom: 0;\n        @media screen and (max-width: 990px) {\n            line-height: 20px;\n        }\n    }\n    .next {\n        margin-top: 15px;\n        color: #1964a3;\n        cursor: pointer;\n        transform: translateX(\"-50px\");\n        opacity: 0;\n    }\n`;\n\nconst CheckAnswer = styled.div`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    align-content: center;\n    margin-bottom: 15px;\n\n    h4 {\n        margin: 0 0 0 15px;\n    }\n`;\n\nconst variants = {\n    open: { y: 0, opacity: 1, display: \"block\" },\n    closed: { y: -50, opacity: 0, display: \"none\" },\n};\n\ntype QuizButtonProps = {\n    selected: boolean;\n};\n\nconst QuizButton = styled.button`\n    background-color: ${({ selected }: QuizButtonProps) =>\n        selected ? \"#2071b5 !important\" : \"#1964a3 !important\"};\n`;\n\nexport const Quiz = () => {\n    // const [speed, setSpeed] = useState<0 | 1 | 2 | 3>(0);\n\n    const [currentQuestion, setCurrentQuestion] = useState<1 | 2 | 3>(1);\n    const [question1, setQuestion1] = useState<boolean>(false);\n    const [question2, setQuestion2] = useState<boolean>(false);\n    const [question3, setQuestion3] = useState<boolean>(false);\n    const [rightAnswer, setRightAnswer] = useState<boolean>(false);\n    const [selectedAnswer, setSelectedAnswer] = useState<string>(\"\");\n\n    /*const getCurrentRotation = () => {\n        const el = document.getElementById(\"wind\");\n        const st = window.getComputedStyle(el!, null);\n        const tm = st.getPropertyValue(\"transform\");\n        let rot = 0;\n        \n        if (tm) {\n            const values = tm.split(\"(\")[1].split(\")\")[0].split(\",\");\n            \n            const angle = Math.round(\n                Math.atan2(Number(values[1]), Number(values[0])) * (180 / Math.PI)\n            );\n\n            rot = angle < 0 ? angle + 360 : angle;\n            console.log(rot);          \n            \n            return angle < 0 ? angle + 360 : angle;\n        }\n        \n        return 0;\n    }*/\n\n    // whenever the user goes to next question, reset state to reset styling of buttons\n    useEffect(() => {\n        setSelectedAnswer(\"\");\n    }, [currentQuestion]);\n\n    return (\n        <Container>\n            {/* <QuizButton\n                className=\"vf-btn vf-btn--sm vf-btn--primary\"\n                selected={selectedAnswer === \"Ja\"}\n                onClick={() => {\n                    setSelectedAnswer(\"Ja\");\n                }}\n            >\n                Ja\n            </QuizButton>\n            <QuizButton\n                className=\"vf-btn vf-btn--sm vf-btn--primary\"\n                selected={selectedAnswer === \"Nej\"}\n                onClick={() => {\n                    setSelectedAnswer(\"Nej\");\n                }}\n            >\n                Nej\n            </QuizButton> */}\n            <Header>\n                <div>\n                    <video\n                        width=\"150\"\n                        height=\"150\"\n                        style={{ zIndex: 1 }}\n                        autoPlay\n                        muted\n                        playsInline\n                        loop\n                    >\n                        <source src={hydrogenQuiz} type=\"video/mp4\" />\n                    </video>\n                    <h2>Mitä tiedät vedystä?</h2>\n                </div>\n            </Header>\n\n            {currentQuestion === 1 && (\n                <Question>\n                    <div className=\"question\">\n                        {/* <p style={{ marginBottom: \"-3px\", fontSize: \"14px\" }}>\n                            1/3\n                        </p> */}\n                        <h4>Kysymys 1:</h4>\n                        <p>\n                            Voidaanko teollisuuden päästöistä tehdä harmittomia?\n                        </p>\n                    </div>\n                    <div className=\"options\">\n                        <div className=\"buttons\">\n                            <QuizButton\n                                selected={selectedAnswer === \"Kyllä\"}\n                                type=\"button\"\n                                className=\"vf-btn vf-btn--sm vf-btn--primary\"\n                                onClick={() => {\n                                    setSelectedAnswer(\"Kyllä\");\n                                    setQuestion1(true);\n                                    setRightAnswer(true);\n                                    // setSpeed(1);\n                                }}\n                            >\n                                Kyllä\n                            </QuizButton>\n                            <QuizButton\n                                selected={selectedAnswer === \"Ei\"}\n                                type=\"button\"\n                                className=\"vf-btn vf-btn--sm vf-btn--primary\"\n                                onClick={() => {\n                                    setSelectedAnswer(\"Ei\");\n                                    setQuestion1(true);\n                                    setRightAnswer(false);\n                                    // setSpeed(0);\n                                }}\n                            >\n                                Ei\n                            </QuizButton>\n                        </div>\n                    </div>\n\n                    <Answer\n                        animate={question1 ? \"open\" : \"closed\"}\n                        variants={variants}\n                        transition={{\n                            type: \"ease\",\n                            default: { duration: 0.4 },\n                        }}\n                    >\n                        <CheckAnswer>\n                            {rightAnswer === true ? (\n                                <>\n                                    <img src={rightAnswerIcon} />{\" \"}\n                                    <h4>Oikea vastaus</h4>\n                                </>\n                            ) : (\n                                <>\n                                    <img src={wrongAnswerIcon} />{\" \"}\n                                    <h4>Väärä vastaus</h4>\n                                </>\n                            )}\n                        </CheckAnswer>\n                        <p>\n                            Kyllä voidaan. Kun vetyä käytetään polttoaineena, on\n                            päästönä vain vesihöyryä.\n                        </p>\n                        <motion.p\n                            animate={{\n                                x: question1 ? 0 : -40,\n                                opacity: question1 ? 1 : 0,\n                            }}\n                            transition={{\n                                delay: 0.4,\n                                type: \"spring\",\n                                stiffness: 100,\n                            }}\n                            className=\"next\"\n                            onClick={() => setCurrentQuestion(2)}\n                        >\n                            &#62; Seuraava kysymys\n                        </motion.p>\n                    </Answer>\n                </Question>\n            )}\n\n            {currentQuestion === 2 && (\n                <Question>\n                    <div className=\"question\">\n                        {/* <p style={{ marginBottom: \"-3px\", fontSize: \"14px\" }}>\n                            2/3\n                        </p> */}\n                        <h4>Kysymys 2:</h4>\n                        <p>Onko mahdollista tuottaa tarpeeksi vetyä?</p>\n                    </div>\n                    <div className=\"options\">\n                        <div className=\"buttons\">\n                            <QuizButton\n                                selected={selectedAnswer === \"Kyllä\"}\n                                onClick={() => {\n                                    setQuestion2(true);\n                                    setRightAnswer(true);\n                                    setSelectedAnswer(\"Kyllä\");\n                                    // setSpeed(1);\n                                }}\n                                type=\"button\"\n                                className=\"vf-btn vf-btn--sm vf-btn--primary\"\n                            >\n                                Kyllä\n                            </QuizButton>\n                            <QuizButton\n                                selected={selectedAnswer === \"Ei\"}\n                                onClick={() => {\n                                    setQuestion2(true);\n                                    setRightAnswer(false);\n                                    setSelectedAnswer(\"Ei\");\n                                    // setSpeed(2);\n                                }}\n                                type=\"button\"\n                                className=\"vf-btn vf-btn--sm vf-btn--primary\"\n                            >\n                                Ei\n                            </QuizButton>\n                        </div>\n                    </div>\n                    <Answer\n                        animate={question2 ? \"open\" : \"closed\"}\n                        variants={variants}\n                        transition={{\n                            type: \"ease\",\n                            default: { duration: 0.4 },\n                        }}\n                    >\n                        <CheckAnswer>\n                            {rightAnswer === false ? (\n                                <>\n                                    <img src={rightAnswerIcon} />{\" \"}\n                                    <h4>Oikea vastaus</h4>\n                                </>\n                            ) : (\n                                <>\n                                    <img src={wrongAnswerIcon} />{\" \"}\n                                    <h4>Väärä vastaus</h4>\n                                </>\n                            )}\n                        </CheckAnswer>\n                        <p>\n                            Ei vielä. Tutkimme, miten kelluvia\n                            merituulivoimaloita voidaan käyttää vedyn\n                            laajamittaiseen tuotantoon.\n                        </p>\n                        <motion.p\n                            animate={{\n                                x: question2 ? 0 : -50,\n                                opacity: question2 ? 1 : 0,\n                            }}\n                            transition={{\n                                delay: 0.4,\n                                type: \"spring\",\n                                stiffness: 100,\n                            }}\n                            className=\"next\"\n                            onClick={() => setCurrentQuestion(3)}\n                        >\n                            &#62; Seuraava kysymys\n                        </motion.p>\n                    </Answer>\n                </Question>\n            )}\n\n            {currentQuestion === 3 && (\n                <Question>\n                    <div className=\"question\">\n                        {/* <p style={{ marginBottom: \"-3px\", fontSize: \"14px\" }}>\n                            3/3\n                        </p> */}\n                        <h4>Kysymys 3:</h4>\n                        <p>Onko olemassa hyvää ja huonoa vetyä?</p>\n                    </div>\n                    <div className=\"options\">\n                        <div className=\"buttons\">\n                            <QuizButton\n                                selected={selectedAnswer === \"Kyllä\"}\n                                onClick={() => {\n                                    setQuestion3(true);\n                                    setRightAnswer(true);\n                                    setSelectedAnswer(\"Kyllä\");\n                                    // setSpeed(2);\n                                }}\n                                type=\"button\"\n                                className=\"vf-btn vf-btn--sm vf-btn--primary\"\n                            >\n                                Kyllä\n                            </QuizButton>\n                            <QuizButton\n                                selected={selectedAnswer === \"Ei\"}\n                                onClick={() => {\n                                    setQuestion3(true);\n                                    setRightAnswer(false);\n                                    setSelectedAnswer(\"Ei\");\n                                    // setSpeed(3);\n                                }}\n                                type=\"button\"\n                                className=\"vf-btn vf-btn--sm vf-btn--primary\"\n                            >\n                                Ei\n                            </QuizButton>\n                        </div>\n                    </div>\n                    <Answer\n                        animate={question3 ? \"open\" : \"closed\"}\n                        variants={variants}\n                        transition={{\n                            type: \"ease\",\n                            default: { duration: 0.4 },\n                        }}\n                    >\n                        <CheckAnswer>\n                            {rightAnswer === true ? (\n                                <>\n                                    <img src={rightAnswerIcon} />{\" \"}\n                                    <h4>Oikea vastaus</h4>\n                                </>\n                            ) : (\n                                <>\n                                    <img src={wrongAnswerIcon} />{\" \"}\n                                    <h4>Väärä vastaus</h4>\n                                </>\n                            )}\n                        </CheckAnswer>\n                        <p>\n                            Kyllä on. Vedyn tulee olla tuotettu fossiilivapaan\n                            sähkön avulla, jotta sitä voidaan pitää\n                            fossiilivapaana polttoaineena.\n                        </p>\n                    </Answer>\n                </Question>\n            )}\n        </Container>\n    );\n};\n"],"names":["Container","Header","Question","Answer","motion","CheckAnswer","variants","open","y","opacity","display","closed","QuizButton","selected","Quiz","useState","currentQuestion","setCurrentQuestion","question1","setQuestion1","question2","setQuestion2","question3","setQuestion3","rightAnswer","setRightAnswer","selectedAnswer","setSelectedAnswer","useEffect","width","height","style","zIndex","autoPlay","muted","playsInline","loop","src","hydrogenQuiz","type","className","onClick","animate","transition","default","duration","rightAnswerIcon","wrongAnswerIcon","x","delay","stiffness"],"sourceRoot":""}