Last active
February 27, 2023 03:06
-
-
Save YonatanKra/83ddc8aaccde5d83e109b3439f20c440 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link rel="stylesheet" href="https://unpkg.com/@vonage/vivid/styles/fonts/spezia.css"> | |
| <link rel="stylesheet" href="https://unpkg.com/@vonage/vivid/styles/tokens/theme-light.css"> | |
| <link rel="stylesheet" href="https://unpkg.com/@vonage/vivid/styles/core/all.css"> | |
| <style> | |
| .vvd-root vwc-card h2, | |
| .vvd-root vwc-card p { | |
| margin: 0; | |
| } | |
| .vvd-root vwc-card vwc-button { | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body class="vvd-root"> | |
| <vwc-layout> | |
| <vwc-card> | |
| <vwc-layout gutters="medium" slot="main"> | |
| <h2>Hi Rachel!</h2> | |
| <p>You like riddles, and we don't want to make it easy on you to get your bday present so...</p> | |
| <p>The moment you are ready, start the game and work for your prize!</p> | |
| <vwc-button appearance="filled" id="startButton" label="Start the Game!"></vwc-button> | |
| </vwc-layout> | |
| </vwc-card> | |
| </vwc-layout> | |
| <vwc-dialog></vwc-dialog> | |
| <script type="module"> | |
| import "https://unpkg.com/@vonage/vivid/button"; | |
| import "https://unpkg.com/@vonage/vivid/layout"; | |
| import "https://unpkg.com/@vonage/vivid/card"; | |
| import "https://unpkg.com/@vonage/vivid/text-field"; | |
| import "https://unpkg.com/@vonage/vivid/dialog"; | |
| const layout = document.querySelector('vwc-layout'); | |
| const dialog = document.querySelector('vwc-dialog'); | |
| const card = document.querySelector('vwc-card'); | |
| const QUESTIONS = [ | |
| { | |
| id: '1', | |
| selector: '#wife', | |
| properties: ['right', 'margin'], | |
| }, | |
| { | |
| id: '2', | |
| selector: '#tower-of-pise', | |
| properties: ['font-style'], | |
| }, | |
| { | |
| id: '3', | |
| selector: '#titanic', | |
| properties: ['float'], | |
| }, | |
| { | |
| id: '4', | |
| selector: '#moses > .sea', | |
| properties: ['column-count'], | |
| }, | |
| { | |
| id: '5', | |
| rewardUrl: 'https://www.canva.com/design/DAFbHyox0hc/_-bdsK86jcCqTu_21kjj9w/view' | |
| } | |
| ]; | |
| const ANSWERS = [ | |
| ['100%0', '100%none'], ['italic'], ['none'], ['2'] | |
| ]; | |
| function start() { | |
| addNextQuestion(QUESTIONS[0]); | |
| } | |
| async function verifyAnswer(question) { | |
| const answer = prepareAnswerFromTextFields(); | |
| const response = {}; | |
| const questionIndex = QUESTIONS.findIndex(x => x.id === question.toString()); | |
| response.error = !ANSWERS[questionIndex].includes(answer); | |
| if (response.error) { | |
| error(response.error); | |
| } else { | |
| success(); | |
| addNextQuestion(QUESTIONS[questionIndex + 1]); | |
| } | |
| } | |
| function error(errorMessage) { | |
| dialog.headline = "Wrong Answer!" | |
| dialog.text = "Close this dialog and try again please"; | |
| dialog.showModal(); | |
| } | |
| function success() { | |
| dialog.headline = "Success!" | |
| dialog.text = "Close this for the next question!"; | |
| dialog.showModal(); | |
| } | |
| function prepareAnswerFromTextFields() { | |
| return Array.from(card.querySelectorAll('vwc-text-field')).reduce((res, val) => res += val.value, '') | |
| } | |
| function generateCardContent(question) { | |
| return ` | |
| <vwc-layout gutters="large" slot="main"> | |
| <pre> | |
| ${question.selector} { | |
| ${question.properties.reduce((res, val) => { | |
| return `${res} | |
| ${val}: | |
| ` | |
| }, '')} | |
| } | |
| </pre> | |
| ${question.properties.reduce((res, val) => { | |
| return ` | |
| ${res} | |
| <vwc-text-field label="${val}" id="${val}"></vwc-text-field> | |
| ` | |
| }, '')} | |
| <div style="text-align: center; margin-top: 5px;"> | |
| <vwc-button appearance="filled" connotation="cta" onclick="verifyAnswer(${question.id})" label="Submit"></vwc-button> | |
| </div> | |
| </vwc-layout> | |
| `; | |
| } | |
| function addNextQuestion(question) { | |
| if (question.rewardUrl) { | |
| showWinningModal(question.rewardUrl); | |
| } else { | |
| const cardContent = generateCardContent(question); | |
| card.innerHTML = cardContent; | |
| } | |
| } | |
| function showWinningModal(rewardUrl) { | |
| dialog.headline = 'You Made It!'; | |
| dialog.icon = 'surprised-solid'; | |
| dialog.innerHTML = ` | |
| <div slot="content" style="text-align: center;"> | |
| <h2> Congratulations! </h2> | |
| <p> | |
| <a target="_blank" href=${rewardUrl}> | |
| <vwc-button appearance='filled' connotation="success" label="Get Your Prize!!!"></vwc-button> | |
| </p> | |
| </a> | |
| </div> | |
| `; | |
| dialog.showModal(); | |
| } | |
| document.getElementById('startButton').addEventListener('click', start); | |
| window.verifyAnswer = verifyAnswer; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment