Psalms 86:11

{
  "isOffWeek": true,
  "isDarkMode": false,
  "isPWAInstalled": false,
  "passageNum": 48,
  "bookName": "Psalms",
  "chapter": 86,
  "hasPreviewVerse": false,
  "bibleDotComUrl": "https://www.bible.com/bible/111/PSA.86.NIV?utm_source=malachi-daily-web-app&utm_medium=referral",
  "isScheduledVerse": 48,
  "malachiDailyBlogUrl": "https://blog.malachidaily.com/?q=Psalms+86%3A11&referring_domain=app.malachidaily.com&utm_source=malachi-daily-web-app&utm_medium=referral",
  "daysUntilNextVerse": "4",
  "isUsingArcBrowser": false,
  "iconArticle": "<svg class=\"text-muted inline-flex\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm4 2h10M7 12h10M7 16h10\"/></svg>",
  "iconYVBible": "<svg class=\"text-muted inline-flex\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.344 21.836c-1.31-.177-2.567-.574-3.587-1.593-1.019-1.02-1.416-2.276-1.593-3.587C2 15.432 2 13.905 2 12.132v-.264c0-1.773 0-3.3.164-4.524.177-1.31.574-2.567 1.593-3.587 1.02-1.019 2.276-1.416 3.587-1.593C8.568 2 10.095 2 11.868 2h.264c1.773 0 3.3 0 4.524.164 1.31.177 2.567.574 3.587 1.593 1.019 1.02 1.416 2.276 1.593 3.587C22 8.568 22 10.095 22 11.868v.264c0 1.773 0 3.3-.164 4.524-.177 1.31-.574 2.567-1.593 3.587-1.02 1.019-2.276 1.416-3.587 1.593-1.224.164-2.751.164-4.524.164h-.264c-1.773 0-3.3 0-4.524-.164ZM5.172 5.172C4 6.343 4 8.229 4 12c0 3.771 0 5.657 1.172 6.828C6.343 20 8.229 20 12 20c3.771 0 5.657 0 6.828-1.172C20 17.657 20 15.771 20 12c0-3.771 0-5.657-1.172-6.828C17.657 4 15.771 4 12 4 8.229 4 6.343 4 5.172 5.172Z\" fill=\"currentColor\"></path><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.978 18h6.404c1.317 0 2.169.057 2.956-.861.676-.782.62-2.097.662-3.139-.762 1.323-2.161 1.278-3.242 1.278H7.095c-1.89.004-1.163 2.721.883 2.721Z\" fill=\"currentColor\"></path></svg>",
  "iconRightArrowSVG": "<svg class=\"text-muted\" width=\"24px\" height=\"24px\" stroke-width=\"2.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" color=\"currentColor\"><path d=\"M9 6L15 12L9 18\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>",
  "showDebug": false,
  "bibleVersionData": {
    "NKJV": {
      "language": "en",
      "readableName": "NKJV - New King James Version",
      "attribution": "Scripture taken from the New King James Version®. Copyright © 1982 by Thomas Nelson. Used by permission. All rights reserved."
    },
    "NIV": {
      "language": "en",
      "readableName": "NIV - New International Version",
      "attribution": "Scriptures taken from the Holy Bible, New International Version®, NIV®. Copyright © 1973, 1978, 1984, 2011 by Biblica, Inc.™ Used by permission of Zondervan. All rights reserved worldwide. www.zondervan.com The “NIV” and “New International Version” are trademarks registered in the United States Patent and Trademark Office by Biblica, Inc.™"
    },
    "ESV": {
      "language": "en",
      "readableName": "ESV - English Standard Version",
      "attribution": "Scripture quotations are from the ESV® Bible (The Holy Bible, English Standard Version®), © 2001 by Crossway, a publishing ministry of Good News Publishers. Used by permission. All rights reserved."
    },
    "NLT": {
      "language": "en",
      "readableName": "NLT - New Living Translation",
      "attribution": "Scripture quotations are taken from the Holy Bible, New Living Translation, copyright ©1996, 2004, 2015 by Tyndale House Foundation. Used by permission of Tyndale House Publishers, Carol Stream, Illinois 60188. All rights reserved."
    },
    "KJV": {
      "language": "en",
      "readableName": "KJV - King James Version",
      "attribution": "Rights in the Authorized (King James) Version in the United Kingdom are vested in the Crown. Published by permission of the Crown’s patentee, Cambridge University Press."
    },
    "MSG": {
      "language": "en",
      "readableName": "MSG - The Message",
      "attribution": "All Scripture quotations are taken from The Message, copyright © 1993, 2002, 2018 by Eugene H. Peterson. Used by permission of NavPress. . All rights reserved. Represented by Tyndale House Publishers."
    },
    "NET": {
      "language": "en",
      "readableName": "NET - New English Translation",
      "attribution": "Scripture quoted by permission. Quotations designated (NET) are from the NET Bible® copyright ©1996, 2019 by Biblical Studies Press, L.L.C. http://netbible.com. All rights reserved."
    },
    "RV1960": {
      "language": "es",
      "readableName": "RV1960 - Reina Valera 1960",
      "attribution": "© Sociedades Bíblicas Unidas, 1960. Todos los derechos reservados. Sociedades Bíblicas Unidas (SBU): https://unitedbiblesocieties.org/es/casa/"
    },
    "NVI": {
      "language": "es",
      "readableName": "NVI - Nueva Versión Internacional",
      "attribution": "Nueva Versión Internacional® © 2015 por Biblica, Inc.® Todos los derechos reservados. Biblica, Inc.: https://www.biblica.com/"
    },
    "NTV": {
      "language": "es",
      "readableName": "NTV - Nueva Traducción Viviente",
      "attribution": "Nueva Traducción Viviente® © 2010 Tyndale House Foundation.® Todos los derechos reservados. Tyndale House Foundation: https://www.tyndale.com/"
    }
  },
  "bibleVersionPreference": "NIV",
  "versesObj": {
    "NIV": "Teach me your way, O Lord, and I will walk in your truth; give me an undivided heart, that I may fear your name.",
    "ESV": " Teach me your way, O LORD, that I may walk in your truth; unite my heart to fear your name.",
    "NLT": "Teach me your ways, O LORD, that I may live according to your truth! Grant me purity of heart, so that I may honor you. ",
    "KJV": "Teach me thy way, O LORD; I will walk in thy truth: unite my heart to fear thy name.",
    "MSG": "Train me, God, to walk straight; then I'll follow your true path. Put me together, one heart and mind; then, undivided, I'll worship in joyful fear.",
    "NET": "O LORD, teach me how you want me to live! Then I will obey your commands. Make me wholeheartedly committed to you!",
    "NKJV": " Teach me Your way, O LORD; I will walk in Your truth; Unite my heart to fear Your name.",
    "RV1960": "Enséñame,  oh Jehová,  tu camino;  caminaré yo en tu verdad;  Afirma mi corazón para que tema tu nombre.",
    "NVI": "Instrúyeme,  Señor,  en tu *camino  para conducirme con fidelidad.  para temer tu nombre.",
    "NTV": "Enséñame tus caminos, oh SEÑOR,  para que viva de acuerdo con tu verdad.  Concédeme pureza de corazón,  para que te honre. "
  },
  "notificationAlert": "",
  "notificationInfo": "",
  "scriptureTextOriginal": "Teach me your way, O Lord, and I will walk in your truth; give me an undivided heart, that I may fear your name.",
  "scriptureRef": "Psalms 86:11",
  "showSerifFont": false,
  "iOSVersion": 0,
  "isEligibleForNotificationPermission": true,
  "fidelityOfTheDay": 30,
  "fidelity": 30,
  "showFirstLetter": false,
  "shouldRandomizeOrderOfHiddenWords": false,
  "showSubscribeSection": true,
  "firebaseCMToken": "",
  "isSubscribedToNotifications": false,
  "isFullscreen": false,
  "scriptureWithUnderscores": "\n\t\t\t\t\t\t\t\t_____\n\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t__\n\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t____\n\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t___,\n\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t_\n\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t____,\n\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t___\n\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t_\n\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t____\n\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t____\n\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t__\n\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t____\n\t\t\t\t\t\t\t truth; give me an undivided heart, that I may fear your name.",
  "scriptureHTMLCache": {
    "30": "<div class=\"text-[inherit] cursor-default align-bottom inline-flex whitespace-nowrap rounded-md focus:outline-2 focus:outline-blue-400\">\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tid=\"firstHiddenWordInput\"\n\t\t\t\t\t\t\t\t\tcontenteditable=\"plaintext-only\"\n\t\t\t\t\t\t\t\t\tx-data=\"{\n\t\t\t\t\t\t\t\t\t\tindex: 0,\n\t\t\t\t\t\t\t\t\t\tcorrectWord: 'Teach',\n\t\t\t\t\t\t\t\t\t\tshowWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tshowWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget numOfWordsToGuess() {\n\t\t\t\t\t\t\t\t\t\t\tconst words = document.querySelectorAll('[contenteditable]');\n\t\t\t\t\t\t\t\t\t\t\treturn words.length;\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tcalculateResults() {\n                      // Get where data-solved exists\n\t\t\t\t\t\t\t\t\t\t\tconst words = Array.from(document.querySelectorAll('[data-solved]'));\n                      const weHaveAWinner = words.length === this.numOfWordsToGuess;\n\t\t\t\t\t\t\t\t\t\t\tif (weHaveAWinner) {\n\t\t\t\t\t\t\t\t\t\t\t\tconst duration = 2 * 1000;\n\t\t\t\t\t\t\t\t\t\t\t\tconst end = Date.now() + duration;\n\n\t\t\t\t\t\t\t\t\t\t\t\t(function frame() {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// launch a few confetti from the left edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 60,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 0 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// and launch a few from the right edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 120,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 1 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// keep going until we are out of time\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (Date.now() < end) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequestAnimationFrame(frame);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}());\n\n                        resetScriptureGuessInputs();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget hiddenWordElsAsArray() {\n\t\t\t\t\t\t\t\t\t\t\tconst nextWords = document.querySelectorAll('[data-index]');\n\t\t\t\t\t\t\t\t\t\t\treturn Array.from(nextWords);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgetHiddenWordFromIndex(index) {\n\t\t\t\t\t\t\t\t\t\t\treturn this.hiddenWordElsAsArray.find((word) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn word.getAttribute('data-index') === index.toString();\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgoToNextWord() {\n\t\t\t\t\t\t\t\t\t\t\t// Find the next word if it exists.\n\t\t\t\t\t\t\t\t\t\t\tif (this.index < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordIndex = this.index + 1;\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordEl;\n\n\t\t\t\t\t\t\t\t\t\t\t\twhile (!nextWordEl && nextWordIndex < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl = this.getHiddenWordFromIndex(nextWordIndex);\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordIndex += 1;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\tif (nextWordEl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.blur();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\twordIsCorrect: false,\n\t\t\t\t\t\t\t\t\t\tvalidateWord(event) {\n\t\t\t\t\t\t\t\t\t\t\t// Allow user to press spacebar without it affecting anything.\n\t\t\t\t\t\t\t\t\t\t\tif (event.data === ' ') {\n\t\t\t\t\t\t\t\t\t\t\t\t// Remove the last character from $el.innerText\n\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = $el.innerText.slice(0, -1);\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.length >= this.correctWord.length) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t// Check if the word is correct\n\t\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.toLowerCase() === this.correctWord.toLowerCase()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// If the word is correct, then make the outline green\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = true;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.goToNextWord();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Incorrect word. Fix by resetting it.\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\treturn Boolean($el.innerText === this.correctWord);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t// The input must be a max and min width, so that it doesn't\n\t\t\t\t\t\t\t\t\t\t// grow or shrink. It must maintain its original width.\t\n\t\t\t\t\t\t\t\t\t\trecalculateWidth() {\n\t\t\t\t\t\t\t\t\t\t\t$el.style.maxWidth = $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.minWidth =  $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.width = '100%';\n\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t\tautocapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\t\tx-bind:data-solved=\"wordIsCorrect ? true : false\"\n\t\t\t\t\t\t\t\t\tdata-index=\"0\"\n\t\t\t\t\t\t\t\t\tdata-underscores=\"_____\"\n\t\t\t\t\t\t\t\t\tclass=\"focus-visible:outline-1 cursor-text self-baseline mask-underscores opacity-60 outline-0 rounded-sm inline-flex text-blue-700 dark:text-gray-300\"\n\t\t\t\t\t\t\t\t\tx-init=\"\n\t\t\t\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\t\t\t\trecalculateWidth();\n\t\t\t\t\t\t\t\t\t\t}, 100);\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\tx-on:resize.window=\"recalculateWidth()\"\n\t\t\t\t\t\t\t\t\tx-on:blur=\"$nextTick(() => calculateResults())\"\n\t\t\t\t\t\t\t\t\tx-on:input=\"validateWord(event)\"\n\t\t\t\t\t\t\t\t\tx-on:focus=\"$el.innerText = ''; wordIsCorrect = false;\"\n\t\t\t\t\t\t\t\t>_____</span>\n\t\t\t\t\t\t\t</div> <div class=\"text-[inherit] cursor-default align-bottom inline-flex whitespace-nowrap rounded-md focus:outline-2 focus:outline-blue-400\">\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tid=\"firstHiddenWordInput\"\n\t\t\t\t\t\t\t\t\tcontenteditable=\"plaintext-only\"\n\t\t\t\t\t\t\t\t\tx-data=\"{\n\t\t\t\t\t\t\t\t\t\tindex: 1,\n\t\t\t\t\t\t\t\t\t\tcorrectWord: 'me',\n\t\t\t\t\t\t\t\t\t\tshowWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tshowWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget numOfWordsToGuess() {\n\t\t\t\t\t\t\t\t\t\t\tconst words = document.querySelectorAll('[contenteditable]');\n\t\t\t\t\t\t\t\t\t\t\treturn words.length;\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tcalculateResults() {\n                      // Get where data-solved exists\n\t\t\t\t\t\t\t\t\t\t\tconst words = Array.from(document.querySelectorAll('[data-solved]'));\n                      const weHaveAWinner = words.length === this.numOfWordsToGuess;\n\t\t\t\t\t\t\t\t\t\t\tif (weHaveAWinner) {\n\t\t\t\t\t\t\t\t\t\t\t\tconst duration = 2 * 1000;\n\t\t\t\t\t\t\t\t\t\t\t\tconst end = Date.now() + duration;\n\n\t\t\t\t\t\t\t\t\t\t\t\t(function frame() {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// launch a few confetti from the left edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 60,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 0 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// and launch a few from the right edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 120,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 1 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// keep going until we are out of time\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (Date.now() < end) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequestAnimationFrame(frame);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}());\n\n                        resetScriptureGuessInputs();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget hiddenWordElsAsArray() {\n\t\t\t\t\t\t\t\t\t\t\tconst nextWords = document.querySelectorAll('[data-index]');\n\t\t\t\t\t\t\t\t\t\t\treturn Array.from(nextWords);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgetHiddenWordFromIndex(index) {\n\t\t\t\t\t\t\t\t\t\t\treturn this.hiddenWordElsAsArray.find((word) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn word.getAttribute('data-index') === index.toString();\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgoToNextWord() {\n\t\t\t\t\t\t\t\t\t\t\t// Find the next word if it exists.\n\t\t\t\t\t\t\t\t\t\t\tif (this.index < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordIndex = this.index + 1;\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordEl;\n\n\t\t\t\t\t\t\t\t\t\t\t\twhile (!nextWordEl && nextWordIndex < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl = this.getHiddenWordFromIndex(nextWordIndex);\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordIndex += 1;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\tif (nextWordEl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.blur();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\twordIsCorrect: false,\n\t\t\t\t\t\t\t\t\t\tvalidateWord(event) {\n\t\t\t\t\t\t\t\t\t\t\t// Allow user to press spacebar without it affecting anything.\n\t\t\t\t\t\t\t\t\t\t\tif (event.data === ' ') {\n\t\t\t\t\t\t\t\t\t\t\t\t// Remove the last character from $el.innerText\n\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = $el.innerText.slice(0, -1);\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.length >= this.correctWord.length) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t// Check if the word is correct\n\t\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.toLowerCase() === this.correctWord.toLowerCase()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// If the word is correct, then make the outline green\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = true;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.goToNextWord();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Incorrect word. Fix by resetting it.\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\treturn Boolean($el.innerText === this.correctWord);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t// The input must be a max and min width, so that it doesn't\n\t\t\t\t\t\t\t\t\t\t// grow or shrink. It must maintain its original width.\t\n\t\t\t\t\t\t\t\t\t\trecalculateWidth() {\n\t\t\t\t\t\t\t\t\t\t\t$el.style.maxWidth = $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.minWidth =  $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.width = '100%';\n\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t\tautocapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\t\tx-bind:data-solved=\"wordIsCorrect ? true : false\"\n\t\t\t\t\t\t\t\t\tdata-index=\"1\"\n\t\t\t\t\t\t\t\t\tdata-underscores=\"__\"\n\t\t\t\t\t\t\t\t\tclass=\"focus-visible:outline-1 cursor-text self-baseline mask-underscores opacity-60 outline-0 rounded-sm inline-flex text-blue-700 dark:text-gray-300\"\n\t\t\t\t\t\t\t\t\tx-init=\"\n\t\t\t\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\t\t\t\trecalculateWidth();\n\t\t\t\t\t\t\t\t\t\t}, 100);\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\tx-on:resize.window=\"recalculateWidth()\"\n\t\t\t\t\t\t\t\t\tx-on:blur=\"$nextTick(() => calculateResults())\"\n\t\t\t\t\t\t\t\t\tx-on:input=\"validateWord(event)\"\n\t\t\t\t\t\t\t\t\tx-on:focus=\"$el.innerText = ''; wordIsCorrect = false;\"\n\t\t\t\t\t\t\t\t>__</span>\n\t\t\t\t\t\t\t</div> <div class=\"text-[inherit] cursor-default align-bottom inline-flex whitespace-nowrap rounded-md focus:outline-2 focus:outline-blue-400\">\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tid=\"firstHiddenWordInput\"\n\t\t\t\t\t\t\t\t\tcontenteditable=\"plaintext-only\"\n\t\t\t\t\t\t\t\t\tx-data=\"{\n\t\t\t\t\t\t\t\t\t\tindex: 2,\n\t\t\t\t\t\t\t\t\t\tcorrectWord: 'your',\n\t\t\t\t\t\t\t\t\t\tshowWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tshowWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget numOfWordsToGuess() {\n\t\t\t\t\t\t\t\t\t\t\tconst words = document.querySelectorAll('[contenteditable]');\n\t\t\t\t\t\t\t\t\t\t\treturn words.length;\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tcalculateResults() {\n                      // Get where data-solved exists\n\t\t\t\t\t\t\t\t\t\t\tconst words = Array.from(document.querySelectorAll('[data-solved]'));\n                      const weHaveAWinner = words.length === this.numOfWordsToGuess;\n\t\t\t\t\t\t\t\t\t\t\tif (weHaveAWinner) {\n\t\t\t\t\t\t\t\t\t\t\t\tconst duration = 2 * 1000;\n\t\t\t\t\t\t\t\t\t\t\t\tconst end = Date.now() + duration;\n\n\t\t\t\t\t\t\t\t\t\t\t\t(function frame() {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// launch a few confetti from the left edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 60,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 0 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// and launch a few from the right edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 120,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 1 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// keep going until we are out of time\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (Date.now() < end) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequestAnimationFrame(frame);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}());\n\n                        resetScriptureGuessInputs();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget hiddenWordElsAsArray() {\n\t\t\t\t\t\t\t\t\t\t\tconst nextWords = document.querySelectorAll('[data-index]');\n\t\t\t\t\t\t\t\t\t\t\treturn Array.from(nextWords);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgetHiddenWordFromIndex(index) {\n\t\t\t\t\t\t\t\t\t\t\treturn this.hiddenWordElsAsArray.find((word) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn word.getAttribute('data-index') === index.toString();\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgoToNextWord() {\n\t\t\t\t\t\t\t\t\t\t\t// Find the next word if it exists.\n\t\t\t\t\t\t\t\t\t\t\tif (this.index < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordIndex = this.index + 1;\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordEl;\n\n\t\t\t\t\t\t\t\t\t\t\t\twhile (!nextWordEl && nextWordIndex < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl = this.getHiddenWordFromIndex(nextWordIndex);\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordIndex += 1;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\tif (nextWordEl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.blur();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\twordIsCorrect: false,\n\t\t\t\t\t\t\t\t\t\tvalidateWord(event) {\n\t\t\t\t\t\t\t\t\t\t\t// Allow user to press spacebar without it affecting anything.\n\t\t\t\t\t\t\t\t\t\t\tif (event.data === ' ') {\n\t\t\t\t\t\t\t\t\t\t\t\t// Remove the last character from $el.innerText\n\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = $el.innerText.slice(0, -1);\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.length >= this.correctWord.length) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t// Check if the word is correct\n\t\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.toLowerCase() === this.correctWord.toLowerCase()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// If the word is correct, then make the outline green\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = true;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.goToNextWord();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Incorrect word. Fix by resetting it.\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\treturn Boolean($el.innerText === this.correctWord);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t// The input must be a max and min width, so that it doesn't\n\t\t\t\t\t\t\t\t\t\t// grow or shrink. It must maintain its original width.\t\n\t\t\t\t\t\t\t\t\t\trecalculateWidth() {\n\t\t\t\t\t\t\t\t\t\t\t$el.style.maxWidth = $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.minWidth =  $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.width = '100%';\n\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t\tautocapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\t\tx-bind:data-solved=\"wordIsCorrect ? true : false\"\n\t\t\t\t\t\t\t\t\tdata-index=\"2\"\n\t\t\t\t\t\t\t\t\tdata-underscores=\"____\"\n\t\t\t\t\t\t\t\t\tclass=\"focus-visible:outline-1 cursor-text self-baseline mask-underscores opacity-60 outline-0 rounded-sm inline-flex text-blue-700 dark:text-gray-300\"\n\t\t\t\t\t\t\t\t\tx-init=\"\n\t\t\t\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\t\t\t\trecalculateWidth();\n\t\t\t\t\t\t\t\t\t\t}, 100);\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\tx-on:resize.window=\"recalculateWidth()\"\n\t\t\t\t\t\t\t\t\tx-on:blur=\"$nextTick(() => calculateResults())\"\n\t\t\t\t\t\t\t\t\tx-on:input=\"validateWord(event)\"\n\t\t\t\t\t\t\t\t\tx-on:focus=\"$el.innerText = ''; wordIsCorrect = false;\"\n\t\t\t\t\t\t\t\t>____</span>\n\t\t\t\t\t\t\t</div> <div class=\"text-[inherit] cursor-default align-bottom inline-flex whitespace-nowrap rounded-md focus:outline-2 focus:outline-blue-400\">\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tid=\"firstHiddenWordInput\"\n\t\t\t\t\t\t\t\t\tcontenteditable=\"plaintext-only\"\n\t\t\t\t\t\t\t\t\tx-data=\"{\n\t\t\t\t\t\t\t\t\t\tindex: 3,\n\t\t\t\t\t\t\t\t\t\tcorrectWord: 'way',\n\t\t\t\t\t\t\t\t\t\tshowWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tshowWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget numOfWordsToGuess() {\n\t\t\t\t\t\t\t\t\t\t\tconst words = document.querySelectorAll('[contenteditable]');\n\t\t\t\t\t\t\t\t\t\t\treturn words.length;\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tcalculateResults() {\n                      // Get where data-solved exists\n\t\t\t\t\t\t\t\t\t\t\tconst words = Array.from(document.querySelectorAll('[data-solved]'));\n                      const weHaveAWinner = words.length === this.numOfWordsToGuess;\n\t\t\t\t\t\t\t\t\t\t\tif (weHaveAWinner) {\n\t\t\t\t\t\t\t\t\t\t\t\tconst duration = 2 * 1000;\n\t\t\t\t\t\t\t\t\t\t\t\tconst end = Date.now() + duration;\n\n\t\t\t\t\t\t\t\t\t\t\t\t(function frame() {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// launch a few confetti from the left edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 60,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 0 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// and launch a few from the right edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 120,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 1 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// keep going until we are out of time\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (Date.now() < end) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequestAnimationFrame(frame);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}());\n\n                        resetScriptureGuessInputs();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget hiddenWordElsAsArray() {\n\t\t\t\t\t\t\t\t\t\t\tconst nextWords = document.querySelectorAll('[data-index]');\n\t\t\t\t\t\t\t\t\t\t\treturn Array.from(nextWords);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgetHiddenWordFromIndex(index) {\n\t\t\t\t\t\t\t\t\t\t\treturn this.hiddenWordElsAsArray.find((word) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn word.getAttribute('data-index') === index.toString();\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgoToNextWord() {\n\t\t\t\t\t\t\t\t\t\t\t// Find the next word if it exists.\n\t\t\t\t\t\t\t\t\t\t\tif (this.index < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordIndex = this.index + 1;\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordEl;\n\n\t\t\t\t\t\t\t\t\t\t\t\twhile (!nextWordEl && nextWordIndex < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl = this.getHiddenWordFromIndex(nextWordIndex);\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordIndex += 1;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\tif (nextWordEl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.blur();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\twordIsCorrect: false,\n\t\t\t\t\t\t\t\t\t\tvalidateWord(event) {\n\t\t\t\t\t\t\t\t\t\t\t// Allow user to press spacebar without it affecting anything.\n\t\t\t\t\t\t\t\t\t\t\tif (event.data === ' ') {\n\t\t\t\t\t\t\t\t\t\t\t\t// Remove the last character from $el.innerText\n\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = $el.innerText.slice(0, -1);\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.length >= this.correctWord.length) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t// Check if the word is correct\n\t\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.toLowerCase() === this.correctWord.toLowerCase()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// If the word is correct, then make the outline green\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = true;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.goToNextWord();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Incorrect word. Fix by resetting it.\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\treturn Boolean($el.innerText === this.correctWord);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t// The input must be a max and min width, so that it doesn't\n\t\t\t\t\t\t\t\t\t\t// grow or shrink. It must maintain its original width.\t\n\t\t\t\t\t\t\t\t\t\trecalculateWidth() {\n\t\t\t\t\t\t\t\t\t\t\t$el.style.maxWidth = $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.minWidth =  $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.width = '100%';\n\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t\tautocapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\t\tx-bind:data-solved=\"wordIsCorrect ? true : false\"\n\t\t\t\t\t\t\t\t\tdata-index=\"3\"\n\t\t\t\t\t\t\t\t\tdata-underscores=\"___\"\n\t\t\t\t\t\t\t\t\tclass=\"focus-visible:outline-1 cursor-text self-baseline mask-underscores opacity-60 outline-0 rounded-sm inline-flex text-blue-700 dark:text-gray-300\"\n\t\t\t\t\t\t\t\t\tx-init=\"\n\t\t\t\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\t\t\t\trecalculateWidth();\n\t\t\t\t\t\t\t\t\t\t}, 100);\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\tx-on:resize.window=\"recalculateWidth()\"\n\t\t\t\t\t\t\t\t\tx-on:blur=\"$nextTick(() => calculateResults())\"\n\t\t\t\t\t\t\t\t\tx-on:input=\"validateWord(event)\"\n\t\t\t\t\t\t\t\t\tx-on:focus=\"$el.innerText = ''; wordIsCorrect = false;\"\n\t\t\t\t\t\t\t\t>___</span>,\n\t\t\t\t\t\t\t</div> <div class=\"text-[inherit] cursor-default align-bottom inline-flex whitespace-nowrap rounded-md focus:outline-2 focus:outline-blue-400\">\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tid=\"firstHiddenWordInput\"\n\t\t\t\t\t\t\t\t\tcontenteditable=\"plaintext-only\"\n\t\t\t\t\t\t\t\t\tx-data=\"{\n\t\t\t\t\t\t\t\t\t\tindex: 4,\n\t\t\t\t\t\t\t\t\t\tcorrectWord: 'O',\n\t\t\t\t\t\t\t\t\t\tshowWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tshowWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget numOfWordsToGuess() {\n\t\t\t\t\t\t\t\t\t\t\tconst words = document.querySelectorAll('[contenteditable]');\n\t\t\t\t\t\t\t\t\t\t\treturn words.length;\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tcalculateResults() {\n                      // Get where data-solved exists\n\t\t\t\t\t\t\t\t\t\t\tconst words = Array.from(document.querySelectorAll('[data-solved]'));\n                      const weHaveAWinner = words.length === this.numOfWordsToGuess;\n\t\t\t\t\t\t\t\t\t\t\tif (weHaveAWinner) {\n\t\t\t\t\t\t\t\t\t\t\t\tconst duration = 2 * 1000;\n\t\t\t\t\t\t\t\t\t\t\t\tconst end = Date.now() + duration;\n\n\t\t\t\t\t\t\t\t\t\t\t\t(function frame() {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// launch a few confetti from the left edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 60,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 0 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// and launch a few from the right edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 120,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 1 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// keep going until we are out of time\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (Date.now() < end) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequestAnimationFrame(frame);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}());\n\n                        resetScriptureGuessInputs();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget hiddenWordElsAsArray() {\n\t\t\t\t\t\t\t\t\t\t\tconst nextWords = document.querySelectorAll('[data-index]');\n\t\t\t\t\t\t\t\t\t\t\treturn Array.from(nextWords);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgetHiddenWordFromIndex(index) {\n\t\t\t\t\t\t\t\t\t\t\treturn this.hiddenWordElsAsArray.find((word) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn word.getAttribute('data-index') === index.toString();\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgoToNextWord() {\n\t\t\t\t\t\t\t\t\t\t\t// Find the next word if it exists.\n\t\t\t\t\t\t\t\t\t\t\tif (this.index < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordIndex = this.index + 1;\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordEl;\n\n\t\t\t\t\t\t\t\t\t\t\t\twhile (!nextWordEl && nextWordIndex < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl = this.getHiddenWordFromIndex(nextWordIndex);\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordIndex += 1;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\tif (nextWordEl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.blur();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\twordIsCorrect: false,\n\t\t\t\t\t\t\t\t\t\tvalidateWord(event) {\n\t\t\t\t\t\t\t\t\t\t\t// Allow user to press spacebar without it affecting anything.\n\t\t\t\t\t\t\t\t\t\t\tif (event.data === ' ') {\n\t\t\t\t\t\t\t\t\t\t\t\t// Remove the last character from $el.innerText\n\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = $el.innerText.slice(0, -1);\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.length >= this.correctWord.length) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t// Check if the word is correct\n\t\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.toLowerCase() === this.correctWord.toLowerCase()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// If the word is correct, then make the outline green\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = true;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.goToNextWord();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Incorrect word. Fix by resetting it.\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\treturn Boolean($el.innerText === this.correctWord);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t// The input must be a max and min width, so that it doesn't\n\t\t\t\t\t\t\t\t\t\t// grow or shrink. It must maintain its original width.\t\n\t\t\t\t\t\t\t\t\t\trecalculateWidth() {\n\t\t\t\t\t\t\t\t\t\t\t$el.style.maxWidth = $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.minWidth =  $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.width = '100%';\n\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t\tautocapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\t\tx-bind:data-solved=\"wordIsCorrect ? true : false\"\n\t\t\t\t\t\t\t\t\tdata-index=\"4\"\n\t\t\t\t\t\t\t\t\tdata-underscores=\"_\"\n\t\t\t\t\t\t\t\t\tclass=\"focus-visible:outline-1 cursor-text self-baseline mask-underscores opacity-60 outline-0 rounded-sm inline-flex text-blue-700 dark:text-gray-300\"\n\t\t\t\t\t\t\t\t\tx-init=\"\n\t\t\t\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\t\t\t\trecalculateWidth();\n\t\t\t\t\t\t\t\t\t\t}, 100);\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\tx-on:resize.window=\"recalculateWidth()\"\n\t\t\t\t\t\t\t\t\tx-on:blur=\"$nextTick(() => calculateResults())\"\n\t\t\t\t\t\t\t\t\tx-on:input=\"validateWord(event)\"\n\t\t\t\t\t\t\t\t\tx-on:focus=\"$el.innerText = ''; wordIsCorrect = false;\"\n\t\t\t\t\t\t\t\t>_</span>\n\t\t\t\t\t\t\t</div> <div class=\"text-[inherit] cursor-default align-bottom inline-flex whitespace-nowrap rounded-md focus:outline-2 focus:outline-blue-400\">\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tid=\"firstHiddenWordInput\"\n\t\t\t\t\t\t\t\t\tcontenteditable=\"plaintext-only\"\n\t\t\t\t\t\t\t\t\tx-data=\"{\n\t\t\t\t\t\t\t\t\t\tindex: 5,\n\t\t\t\t\t\t\t\t\t\tcorrectWord: 'Lord',\n\t\t\t\t\t\t\t\t\t\tshowWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tshowWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget numOfWordsToGuess() {\n\t\t\t\t\t\t\t\t\t\t\tconst words = document.querySelectorAll('[contenteditable]');\n\t\t\t\t\t\t\t\t\t\t\treturn words.length;\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tcalculateResults() {\n                      // Get where data-solved exists\n\t\t\t\t\t\t\t\t\t\t\tconst words = Array.from(document.querySelectorAll('[data-solved]'));\n                      const weHaveAWinner = words.length === this.numOfWordsToGuess;\n\t\t\t\t\t\t\t\t\t\t\tif (weHaveAWinner) {\n\t\t\t\t\t\t\t\t\t\t\t\tconst duration = 2 * 1000;\n\t\t\t\t\t\t\t\t\t\t\t\tconst end = Date.now() + duration;\n\n\t\t\t\t\t\t\t\t\t\t\t\t(function frame() {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// launch a few confetti from the left edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 60,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 0 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// and launch a few from the right edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 120,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 1 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// keep going until we are out of time\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (Date.now() < end) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequestAnimationFrame(frame);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}());\n\n                        resetScriptureGuessInputs();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget hiddenWordElsAsArray() {\n\t\t\t\t\t\t\t\t\t\t\tconst nextWords = document.querySelectorAll('[data-index]');\n\t\t\t\t\t\t\t\t\t\t\treturn Array.from(nextWords);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgetHiddenWordFromIndex(index) {\n\t\t\t\t\t\t\t\t\t\t\treturn this.hiddenWordElsAsArray.find((word) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn word.getAttribute('data-index') === index.toString();\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgoToNextWord() {\n\t\t\t\t\t\t\t\t\t\t\t// Find the next word if it exists.\n\t\t\t\t\t\t\t\t\t\t\tif (this.index < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordIndex = this.index + 1;\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordEl;\n\n\t\t\t\t\t\t\t\t\t\t\t\twhile (!nextWordEl && nextWordIndex < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl = this.getHiddenWordFromIndex(nextWordIndex);\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordIndex += 1;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\tif (nextWordEl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.blur();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\twordIsCorrect: false,\n\t\t\t\t\t\t\t\t\t\tvalidateWord(event) {\n\t\t\t\t\t\t\t\t\t\t\t// Allow user to press spacebar without it affecting anything.\n\t\t\t\t\t\t\t\t\t\t\tif (event.data === ' ') {\n\t\t\t\t\t\t\t\t\t\t\t\t// Remove the last character from $el.innerText\n\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = $el.innerText.slice(0, -1);\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.length >= this.correctWord.length) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t// Check if the word is correct\n\t\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.toLowerCase() === this.correctWord.toLowerCase()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// If the word is correct, then make the outline green\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = true;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.goToNextWord();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Incorrect word. Fix by resetting it.\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\treturn Boolean($el.innerText === this.correctWord);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t// The input must be a max and min width, so that it doesn't\n\t\t\t\t\t\t\t\t\t\t// grow or shrink. It must maintain its original width.\t\n\t\t\t\t\t\t\t\t\t\trecalculateWidth() {\n\t\t\t\t\t\t\t\t\t\t\t$el.style.maxWidth = $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.minWidth =  $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.width = '100%';\n\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t\tautocapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\t\tx-bind:data-solved=\"wordIsCorrect ? true : false\"\n\t\t\t\t\t\t\t\t\tdata-index=\"5\"\n\t\t\t\t\t\t\t\t\tdata-underscores=\"____\"\n\t\t\t\t\t\t\t\t\tclass=\"focus-visible:outline-1 cursor-text self-baseline mask-underscores opacity-60 outline-0 rounded-sm inline-flex text-blue-700 dark:text-gray-300\"\n\t\t\t\t\t\t\t\t\tx-init=\"\n\t\t\t\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\t\t\t\trecalculateWidth();\n\t\t\t\t\t\t\t\t\t\t}, 100);\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\tx-on:resize.window=\"recalculateWidth()\"\n\t\t\t\t\t\t\t\t\tx-on:blur=\"$nextTick(() => calculateResults())\"\n\t\t\t\t\t\t\t\t\tx-on:input=\"validateWord(event)\"\n\t\t\t\t\t\t\t\t\tx-on:focus=\"$el.innerText = ''; wordIsCorrect = false;\"\n\t\t\t\t\t\t\t\t>____</span>,\n\t\t\t\t\t\t\t</div> <div class=\"text-[inherit] cursor-default align-bottom inline-flex whitespace-nowrap rounded-md focus:outline-2 focus:outline-blue-400\">\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tid=\"firstHiddenWordInput\"\n\t\t\t\t\t\t\t\t\tcontenteditable=\"plaintext-only\"\n\t\t\t\t\t\t\t\t\tx-data=\"{\n\t\t\t\t\t\t\t\t\t\tindex: 6,\n\t\t\t\t\t\t\t\t\t\tcorrectWord: 'and',\n\t\t\t\t\t\t\t\t\t\tshowWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tshowWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget numOfWordsToGuess() {\n\t\t\t\t\t\t\t\t\t\t\tconst words = document.querySelectorAll('[contenteditable]');\n\t\t\t\t\t\t\t\t\t\t\treturn words.length;\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tcalculateResults() {\n                      // Get where data-solved exists\n\t\t\t\t\t\t\t\t\t\t\tconst words = Array.from(document.querySelectorAll('[data-solved]'));\n                      const weHaveAWinner = words.length === this.numOfWordsToGuess;\n\t\t\t\t\t\t\t\t\t\t\tif (weHaveAWinner) {\n\t\t\t\t\t\t\t\t\t\t\t\tconst duration = 2 * 1000;\n\t\t\t\t\t\t\t\t\t\t\t\tconst end = Date.now() + duration;\n\n\t\t\t\t\t\t\t\t\t\t\t\t(function frame() {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// launch a few confetti from the left edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 60,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 0 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// and launch a few from the right edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 120,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 1 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// keep going until we are out of time\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (Date.now() < end) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequestAnimationFrame(frame);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}());\n\n                        resetScriptureGuessInputs();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget hiddenWordElsAsArray() {\n\t\t\t\t\t\t\t\t\t\t\tconst nextWords = document.querySelectorAll('[data-index]');\n\t\t\t\t\t\t\t\t\t\t\treturn Array.from(nextWords);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgetHiddenWordFromIndex(index) {\n\t\t\t\t\t\t\t\t\t\t\treturn this.hiddenWordElsAsArray.find((word) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn word.getAttribute('data-index') === index.toString();\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgoToNextWord() {\n\t\t\t\t\t\t\t\t\t\t\t// Find the next word if it exists.\n\t\t\t\t\t\t\t\t\t\t\tif (this.index < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordIndex = this.index + 1;\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordEl;\n\n\t\t\t\t\t\t\t\t\t\t\t\twhile (!nextWordEl && nextWordIndex < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl = this.getHiddenWordFromIndex(nextWordIndex);\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordIndex += 1;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\tif (nextWordEl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.blur();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\twordIsCorrect: false,\n\t\t\t\t\t\t\t\t\t\tvalidateWord(event) {\n\t\t\t\t\t\t\t\t\t\t\t// Allow user to press spacebar without it affecting anything.\n\t\t\t\t\t\t\t\t\t\t\tif (event.data === ' ') {\n\t\t\t\t\t\t\t\t\t\t\t\t// Remove the last character from $el.innerText\n\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = $el.innerText.slice(0, -1);\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.length >= this.correctWord.length) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t// Check if the word is correct\n\t\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.toLowerCase() === this.correctWord.toLowerCase()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// If the word is correct, then make the outline green\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = true;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.goToNextWord();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Incorrect word. Fix by resetting it.\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\treturn Boolean($el.innerText === this.correctWord);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t// The input must be a max and min width, so that it doesn't\n\t\t\t\t\t\t\t\t\t\t// grow or shrink. It must maintain its original width.\t\n\t\t\t\t\t\t\t\t\t\trecalculateWidth() {\n\t\t\t\t\t\t\t\t\t\t\t$el.style.maxWidth = $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.minWidth =  $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.width = '100%';\n\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t\tautocapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\t\tx-bind:data-solved=\"wordIsCorrect ? true : false\"\n\t\t\t\t\t\t\t\t\tdata-index=\"6\"\n\t\t\t\t\t\t\t\t\tdata-underscores=\"___\"\n\t\t\t\t\t\t\t\t\tclass=\"focus-visible:outline-1 cursor-text self-baseline mask-underscores opacity-60 outline-0 rounded-sm inline-flex text-blue-700 dark:text-gray-300\"\n\t\t\t\t\t\t\t\t\tx-init=\"\n\t\t\t\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\t\t\t\trecalculateWidth();\n\t\t\t\t\t\t\t\t\t\t}, 100);\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\tx-on:resize.window=\"recalculateWidth()\"\n\t\t\t\t\t\t\t\t\tx-on:blur=\"$nextTick(() => calculateResults())\"\n\t\t\t\t\t\t\t\t\tx-on:input=\"validateWord(event)\"\n\t\t\t\t\t\t\t\t\tx-on:focus=\"$el.innerText = ''; wordIsCorrect = false;\"\n\t\t\t\t\t\t\t\t>___</span>\n\t\t\t\t\t\t\t</div> <div class=\"text-[inherit] cursor-default align-bottom inline-flex whitespace-nowrap rounded-md focus:outline-2 focus:outline-blue-400\">\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tid=\"firstHiddenWordInput\"\n\t\t\t\t\t\t\t\t\tcontenteditable=\"plaintext-only\"\n\t\t\t\t\t\t\t\t\tx-data=\"{\n\t\t\t\t\t\t\t\t\t\tindex: 7,\n\t\t\t\t\t\t\t\t\t\tcorrectWord: 'I',\n\t\t\t\t\t\t\t\t\t\tshowWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tshowWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget numOfWordsToGuess() {\n\t\t\t\t\t\t\t\t\t\t\tconst words = document.querySelectorAll('[contenteditable]');\n\t\t\t\t\t\t\t\t\t\t\treturn words.length;\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tcalculateResults() {\n                      // Get where data-solved exists\n\t\t\t\t\t\t\t\t\t\t\tconst words = Array.from(document.querySelectorAll('[data-solved]'));\n                      const weHaveAWinner = words.length === this.numOfWordsToGuess;\n\t\t\t\t\t\t\t\t\t\t\tif (weHaveAWinner) {\n\t\t\t\t\t\t\t\t\t\t\t\tconst duration = 2 * 1000;\n\t\t\t\t\t\t\t\t\t\t\t\tconst end = Date.now() + duration;\n\n\t\t\t\t\t\t\t\t\t\t\t\t(function frame() {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// launch a few confetti from the left edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 60,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 0 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// and launch a few from the right edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 120,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 1 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// keep going until we are out of time\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (Date.now() < end) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequestAnimationFrame(frame);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}());\n\n                        resetScriptureGuessInputs();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget hiddenWordElsAsArray() {\n\t\t\t\t\t\t\t\t\t\t\tconst nextWords = document.querySelectorAll('[data-index]');\n\t\t\t\t\t\t\t\t\t\t\treturn Array.from(nextWords);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgetHiddenWordFromIndex(index) {\n\t\t\t\t\t\t\t\t\t\t\treturn this.hiddenWordElsAsArray.find((word) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn word.getAttribute('data-index') === index.toString();\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgoToNextWord() {\n\t\t\t\t\t\t\t\t\t\t\t// Find the next word if it exists.\n\t\t\t\t\t\t\t\t\t\t\tif (this.index < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordIndex = this.index + 1;\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordEl;\n\n\t\t\t\t\t\t\t\t\t\t\t\twhile (!nextWordEl && nextWordIndex < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl = this.getHiddenWordFromIndex(nextWordIndex);\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordIndex += 1;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\tif (nextWordEl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.blur();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\twordIsCorrect: false,\n\t\t\t\t\t\t\t\t\t\tvalidateWord(event) {\n\t\t\t\t\t\t\t\t\t\t\t// Allow user to press spacebar without it affecting anything.\n\t\t\t\t\t\t\t\t\t\t\tif (event.data === ' ') {\n\t\t\t\t\t\t\t\t\t\t\t\t// Remove the last character from $el.innerText\n\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = $el.innerText.slice(0, -1);\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.length >= this.correctWord.length) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t// Check if the word is correct\n\t\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.toLowerCase() === this.correctWord.toLowerCase()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// If the word is correct, then make the outline green\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = true;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.goToNextWord();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Incorrect word. Fix by resetting it.\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\treturn Boolean($el.innerText === this.correctWord);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t// The input must be a max and min width, so that it doesn't\n\t\t\t\t\t\t\t\t\t\t// grow or shrink. It must maintain its original width.\t\n\t\t\t\t\t\t\t\t\t\trecalculateWidth() {\n\t\t\t\t\t\t\t\t\t\t\t$el.style.maxWidth = $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.minWidth =  $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.width = '100%';\n\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t\tautocapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\t\tx-bind:data-solved=\"wordIsCorrect ? true : false\"\n\t\t\t\t\t\t\t\t\tdata-index=\"7\"\n\t\t\t\t\t\t\t\t\tdata-underscores=\"_\"\n\t\t\t\t\t\t\t\t\tclass=\"focus-visible:outline-1 cursor-text self-baseline mask-underscores opacity-60 outline-0 rounded-sm inline-flex text-blue-700 dark:text-gray-300\"\n\t\t\t\t\t\t\t\t\tx-init=\"\n\t\t\t\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\t\t\t\trecalculateWidth();\n\t\t\t\t\t\t\t\t\t\t}, 100);\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\tx-on:resize.window=\"recalculateWidth()\"\n\t\t\t\t\t\t\t\t\tx-on:blur=\"$nextTick(() => calculateResults())\"\n\t\t\t\t\t\t\t\t\tx-on:input=\"validateWord(event)\"\n\t\t\t\t\t\t\t\t\tx-on:focus=\"$el.innerText = ''; wordIsCorrect = false;\"\n\t\t\t\t\t\t\t\t>_</span>\n\t\t\t\t\t\t\t</div> <div class=\"text-[inherit] cursor-default align-bottom inline-flex whitespace-nowrap rounded-md focus:outline-2 focus:outline-blue-400\">\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tid=\"firstHiddenWordInput\"\n\t\t\t\t\t\t\t\t\tcontenteditable=\"plaintext-only\"\n\t\t\t\t\t\t\t\t\tx-data=\"{\n\t\t\t\t\t\t\t\t\t\tindex: 8,\n\t\t\t\t\t\t\t\t\t\tcorrectWord: 'will',\n\t\t\t\t\t\t\t\t\t\tshowWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tshowWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget numOfWordsToGuess() {\n\t\t\t\t\t\t\t\t\t\t\tconst words = document.querySelectorAll('[contenteditable]');\n\t\t\t\t\t\t\t\t\t\t\treturn words.length;\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tcalculateResults() {\n                      // Get where data-solved exists\n\t\t\t\t\t\t\t\t\t\t\tconst words = Array.from(document.querySelectorAll('[data-solved]'));\n                      const weHaveAWinner = words.length === this.numOfWordsToGuess;\n\t\t\t\t\t\t\t\t\t\t\tif (weHaveAWinner) {\n\t\t\t\t\t\t\t\t\t\t\t\tconst duration = 2 * 1000;\n\t\t\t\t\t\t\t\t\t\t\t\tconst end = Date.now() + duration;\n\n\t\t\t\t\t\t\t\t\t\t\t\t(function frame() {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// launch a few confetti from the left edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 60,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 0 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// and launch a few from the right edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 120,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 1 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// keep going until we are out of time\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (Date.now() < end) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequestAnimationFrame(frame);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}());\n\n                        resetScriptureGuessInputs();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget hiddenWordElsAsArray() {\n\t\t\t\t\t\t\t\t\t\t\tconst nextWords = document.querySelectorAll('[data-index]');\n\t\t\t\t\t\t\t\t\t\t\treturn Array.from(nextWords);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgetHiddenWordFromIndex(index) {\n\t\t\t\t\t\t\t\t\t\t\treturn this.hiddenWordElsAsArray.find((word) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn word.getAttribute('data-index') === index.toString();\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgoToNextWord() {\n\t\t\t\t\t\t\t\t\t\t\t// Find the next word if it exists.\n\t\t\t\t\t\t\t\t\t\t\tif (this.index < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordIndex = this.index + 1;\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordEl;\n\n\t\t\t\t\t\t\t\t\t\t\t\twhile (!nextWordEl && nextWordIndex < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl = this.getHiddenWordFromIndex(nextWordIndex);\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordIndex += 1;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\tif (nextWordEl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.blur();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\twordIsCorrect: false,\n\t\t\t\t\t\t\t\t\t\tvalidateWord(event) {\n\t\t\t\t\t\t\t\t\t\t\t// Allow user to press spacebar without it affecting anything.\n\t\t\t\t\t\t\t\t\t\t\tif (event.data === ' ') {\n\t\t\t\t\t\t\t\t\t\t\t\t// Remove the last character from $el.innerText\n\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = $el.innerText.slice(0, -1);\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.length >= this.correctWord.length) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t// Check if the word is correct\n\t\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.toLowerCase() === this.correctWord.toLowerCase()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// If the word is correct, then make the outline green\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = true;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.goToNextWord();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Incorrect word. Fix by resetting it.\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\treturn Boolean($el.innerText === this.correctWord);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t// The input must be a max and min width, so that it doesn't\n\t\t\t\t\t\t\t\t\t\t// grow or shrink. It must maintain its original width.\t\n\t\t\t\t\t\t\t\t\t\trecalculateWidth() {\n\t\t\t\t\t\t\t\t\t\t\t$el.style.maxWidth = $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.minWidth =  $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.width = '100%';\n\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t\tautocapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\t\tx-bind:data-solved=\"wordIsCorrect ? true : false\"\n\t\t\t\t\t\t\t\t\tdata-index=\"8\"\n\t\t\t\t\t\t\t\t\tdata-underscores=\"____\"\n\t\t\t\t\t\t\t\t\tclass=\"focus-visible:outline-1 cursor-text self-baseline mask-underscores opacity-60 outline-0 rounded-sm inline-flex text-blue-700 dark:text-gray-300\"\n\t\t\t\t\t\t\t\t\tx-init=\"\n\t\t\t\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\t\t\t\trecalculateWidth();\n\t\t\t\t\t\t\t\t\t\t}, 100);\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\tx-on:resize.window=\"recalculateWidth()\"\n\t\t\t\t\t\t\t\t\tx-on:blur=\"$nextTick(() => calculateResults())\"\n\t\t\t\t\t\t\t\t\tx-on:input=\"validateWord(event)\"\n\t\t\t\t\t\t\t\t\tx-on:focus=\"$el.innerText = ''; wordIsCorrect = false;\"\n\t\t\t\t\t\t\t\t>____</span>\n\t\t\t\t\t\t\t</div> <div class=\"text-[inherit] cursor-default align-bottom inline-flex whitespace-nowrap rounded-md focus:outline-2 focus:outline-blue-400\">\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tid=\"firstHiddenWordInput\"\n\t\t\t\t\t\t\t\t\tcontenteditable=\"plaintext-only\"\n\t\t\t\t\t\t\t\t\tx-data=\"{\n\t\t\t\t\t\t\t\t\t\tindex: 9,\n\t\t\t\t\t\t\t\t\t\tcorrectWord: 'walk',\n\t\t\t\t\t\t\t\t\t\tshowWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tshowWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget numOfWordsToGuess() {\n\t\t\t\t\t\t\t\t\t\t\tconst words = document.querySelectorAll('[contenteditable]');\n\t\t\t\t\t\t\t\t\t\t\treturn words.length;\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tcalculateResults() {\n                      // Get where data-solved exists\n\t\t\t\t\t\t\t\t\t\t\tconst words = Array.from(document.querySelectorAll('[data-solved]'));\n                      const weHaveAWinner = words.length === this.numOfWordsToGuess;\n\t\t\t\t\t\t\t\t\t\t\tif (weHaveAWinner) {\n\t\t\t\t\t\t\t\t\t\t\t\tconst duration = 2 * 1000;\n\t\t\t\t\t\t\t\t\t\t\t\tconst end = Date.now() + duration;\n\n\t\t\t\t\t\t\t\t\t\t\t\t(function frame() {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// launch a few confetti from the left edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 60,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 0 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// and launch a few from the right edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 120,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 1 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// keep going until we are out of time\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (Date.now() < end) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequestAnimationFrame(frame);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}());\n\n                        resetScriptureGuessInputs();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget hiddenWordElsAsArray() {\n\t\t\t\t\t\t\t\t\t\t\tconst nextWords = document.querySelectorAll('[data-index]');\n\t\t\t\t\t\t\t\t\t\t\treturn Array.from(nextWords);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgetHiddenWordFromIndex(index) {\n\t\t\t\t\t\t\t\t\t\t\treturn this.hiddenWordElsAsArray.find((word) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn word.getAttribute('data-index') === index.toString();\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgoToNextWord() {\n\t\t\t\t\t\t\t\t\t\t\t// Find the next word if it exists.\n\t\t\t\t\t\t\t\t\t\t\tif (this.index < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordIndex = this.index + 1;\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordEl;\n\n\t\t\t\t\t\t\t\t\t\t\t\twhile (!nextWordEl && nextWordIndex < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl = this.getHiddenWordFromIndex(nextWordIndex);\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordIndex += 1;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\tif (nextWordEl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.blur();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\twordIsCorrect: false,\n\t\t\t\t\t\t\t\t\t\tvalidateWord(event) {\n\t\t\t\t\t\t\t\t\t\t\t// Allow user to press spacebar without it affecting anything.\n\t\t\t\t\t\t\t\t\t\t\tif (event.data === ' ') {\n\t\t\t\t\t\t\t\t\t\t\t\t// Remove the last character from $el.innerText\n\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = $el.innerText.slice(0, -1);\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.length >= this.correctWord.length) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t// Check if the word is correct\n\t\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.toLowerCase() === this.correctWord.toLowerCase()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// If the word is correct, then make the outline green\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = true;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.goToNextWord();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Incorrect word. Fix by resetting it.\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\treturn Boolean($el.innerText === this.correctWord);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t// The input must be a max and min width, so that it doesn't\n\t\t\t\t\t\t\t\t\t\t// grow or shrink. It must maintain its original width.\t\n\t\t\t\t\t\t\t\t\t\trecalculateWidth() {\n\t\t\t\t\t\t\t\t\t\t\t$el.style.maxWidth = $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.minWidth =  $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.width = '100%';\n\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t\tautocapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\t\tx-bind:data-solved=\"wordIsCorrect ? true : false\"\n\t\t\t\t\t\t\t\t\tdata-index=\"9\"\n\t\t\t\t\t\t\t\t\tdata-underscores=\"____\"\n\t\t\t\t\t\t\t\t\tclass=\"focus-visible:outline-1 cursor-text self-baseline mask-underscores opacity-60 outline-0 rounded-sm inline-flex text-blue-700 dark:text-gray-300\"\n\t\t\t\t\t\t\t\t\tx-init=\"\n\t\t\t\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\t\t\t\trecalculateWidth();\n\t\t\t\t\t\t\t\t\t\t}, 100);\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\tx-on:resize.window=\"recalculateWidth()\"\n\t\t\t\t\t\t\t\t\tx-on:blur=\"$nextTick(() => calculateResults())\"\n\t\t\t\t\t\t\t\t\tx-on:input=\"validateWord(event)\"\n\t\t\t\t\t\t\t\t\tx-on:focus=\"$el.innerText = ''; wordIsCorrect = false;\"\n\t\t\t\t\t\t\t\t>____</span>\n\t\t\t\t\t\t\t</div> <div class=\"text-[inherit] cursor-default align-bottom inline-flex whitespace-nowrap rounded-md focus:outline-2 focus:outline-blue-400\">\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tid=\"firstHiddenWordInput\"\n\t\t\t\t\t\t\t\t\tcontenteditable=\"plaintext-only\"\n\t\t\t\t\t\t\t\t\tx-data=\"{\n\t\t\t\t\t\t\t\t\t\tindex: 10,\n\t\t\t\t\t\t\t\t\t\tcorrectWord: 'in',\n\t\t\t\t\t\t\t\t\t\tshowWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tshowWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget numOfWordsToGuess() {\n\t\t\t\t\t\t\t\t\t\t\tconst words = document.querySelectorAll('[contenteditable]');\n\t\t\t\t\t\t\t\t\t\t\treturn words.length;\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tcalculateResults() {\n                      // Get where data-solved exists\n\t\t\t\t\t\t\t\t\t\t\tconst words = Array.from(document.querySelectorAll('[data-solved]'));\n                      const weHaveAWinner = words.length === this.numOfWordsToGuess;\n\t\t\t\t\t\t\t\t\t\t\tif (weHaveAWinner) {\n\t\t\t\t\t\t\t\t\t\t\t\tconst duration = 2 * 1000;\n\t\t\t\t\t\t\t\t\t\t\t\tconst end = Date.now() + duration;\n\n\t\t\t\t\t\t\t\t\t\t\t\t(function frame() {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// launch a few confetti from the left edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 60,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 0 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// and launch a few from the right edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 120,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 1 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// keep going until we are out of time\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (Date.now() < end) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequestAnimationFrame(frame);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}());\n\n                        resetScriptureGuessInputs();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget hiddenWordElsAsArray() {\n\t\t\t\t\t\t\t\t\t\t\tconst nextWords = document.querySelectorAll('[data-index]');\n\t\t\t\t\t\t\t\t\t\t\treturn Array.from(nextWords);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgetHiddenWordFromIndex(index) {\n\t\t\t\t\t\t\t\t\t\t\treturn this.hiddenWordElsAsArray.find((word) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn word.getAttribute('data-index') === index.toString();\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgoToNextWord() {\n\t\t\t\t\t\t\t\t\t\t\t// Find the next word if it exists.\n\t\t\t\t\t\t\t\t\t\t\tif (this.index < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordIndex = this.index + 1;\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordEl;\n\n\t\t\t\t\t\t\t\t\t\t\t\twhile (!nextWordEl && nextWordIndex < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl = this.getHiddenWordFromIndex(nextWordIndex);\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordIndex += 1;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\tif (nextWordEl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.blur();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\twordIsCorrect: false,\n\t\t\t\t\t\t\t\t\t\tvalidateWord(event) {\n\t\t\t\t\t\t\t\t\t\t\t// Allow user to press spacebar without it affecting anything.\n\t\t\t\t\t\t\t\t\t\t\tif (event.data === ' ') {\n\t\t\t\t\t\t\t\t\t\t\t\t// Remove the last character from $el.innerText\n\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = $el.innerText.slice(0, -1);\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.length >= this.correctWord.length) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t// Check if the word is correct\n\t\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.toLowerCase() === this.correctWord.toLowerCase()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// If the word is correct, then make the outline green\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = true;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.goToNextWord();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Incorrect word. Fix by resetting it.\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\treturn Boolean($el.innerText === this.correctWord);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t// The input must be a max and min width, so that it doesn't\n\t\t\t\t\t\t\t\t\t\t// grow or shrink. It must maintain its original width.\t\n\t\t\t\t\t\t\t\t\t\trecalculateWidth() {\n\t\t\t\t\t\t\t\t\t\t\t$el.style.maxWidth = $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.minWidth =  $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.width = '100%';\n\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t\tautocapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\t\tx-bind:data-solved=\"wordIsCorrect ? true : false\"\n\t\t\t\t\t\t\t\t\tdata-index=\"10\"\n\t\t\t\t\t\t\t\t\tdata-underscores=\"__\"\n\t\t\t\t\t\t\t\t\tclass=\"focus-visible:outline-1 cursor-text self-baseline mask-underscores opacity-60 outline-0 rounded-sm inline-flex text-blue-700 dark:text-gray-300\"\n\t\t\t\t\t\t\t\t\tx-init=\"\n\t\t\t\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\t\t\t\trecalculateWidth();\n\t\t\t\t\t\t\t\t\t\t}, 100);\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\tx-on:resize.window=\"recalculateWidth()\"\n\t\t\t\t\t\t\t\t\tx-on:blur=\"$nextTick(() => calculateResults())\"\n\t\t\t\t\t\t\t\t\tx-on:input=\"validateWord(event)\"\n\t\t\t\t\t\t\t\t\tx-on:focus=\"$el.innerText = ''; wordIsCorrect = false;\"\n\t\t\t\t\t\t\t\t>__</span>\n\t\t\t\t\t\t\t</div> <div class=\"text-[inherit] cursor-default align-bottom inline-flex whitespace-nowrap rounded-md focus:outline-2 focus:outline-blue-400\">\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tid=\"firstHiddenWordInput\"\n\t\t\t\t\t\t\t\t\tcontenteditable=\"plaintext-only\"\n\t\t\t\t\t\t\t\t\tx-data=\"{\n\t\t\t\t\t\t\t\t\t\tindex: 11,\n\t\t\t\t\t\t\t\t\t\tcorrectWord: 'your',\n\t\t\t\t\t\t\t\t\t\tshowWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tshowWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget numOfWordsToGuess() {\n\t\t\t\t\t\t\t\t\t\t\tconst words = document.querySelectorAll('[contenteditable]');\n\t\t\t\t\t\t\t\t\t\t\treturn words.length;\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tcalculateResults() {\n                      // Get where data-solved exists\n\t\t\t\t\t\t\t\t\t\t\tconst words = Array.from(document.querySelectorAll('[data-solved]'));\n                      const weHaveAWinner = words.length === this.numOfWordsToGuess;\n\t\t\t\t\t\t\t\t\t\t\tif (weHaveAWinner) {\n\t\t\t\t\t\t\t\t\t\t\t\tconst duration = 2 * 1000;\n\t\t\t\t\t\t\t\t\t\t\t\tconst end = Date.now() + duration;\n\n\t\t\t\t\t\t\t\t\t\t\t\t(function frame() {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// launch a few confetti from the left edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 60,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 0 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// and launch a few from the right edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 120,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 1 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// keep going until we are out of time\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (Date.now() < end) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequestAnimationFrame(frame);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}());\n\n                        resetScriptureGuessInputs();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget hiddenWordElsAsArray() {\n\t\t\t\t\t\t\t\t\t\t\tconst nextWords = document.querySelectorAll('[data-index]');\n\t\t\t\t\t\t\t\t\t\t\treturn Array.from(nextWords);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgetHiddenWordFromIndex(index) {\n\t\t\t\t\t\t\t\t\t\t\treturn this.hiddenWordElsAsArray.find((word) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn word.getAttribute('data-index') === index.toString();\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgoToNextWord() {\n\t\t\t\t\t\t\t\t\t\t\t// Find the next word if it exists.\n\t\t\t\t\t\t\t\t\t\t\tif (this.index < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordIndex = this.index + 1;\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordEl;\n\n\t\t\t\t\t\t\t\t\t\t\t\twhile (!nextWordEl && nextWordIndex < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl = this.getHiddenWordFromIndex(nextWordIndex);\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordIndex += 1;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\tif (nextWordEl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.blur();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\twordIsCorrect: false,\n\t\t\t\t\t\t\t\t\t\tvalidateWord(event) {\n\t\t\t\t\t\t\t\t\t\t\t// Allow user to press spacebar without it affecting anything.\n\t\t\t\t\t\t\t\t\t\t\tif (event.data === ' ') {\n\t\t\t\t\t\t\t\t\t\t\t\t// Remove the last character from $el.innerText\n\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = $el.innerText.slice(0, -1);\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.length >= this.correctWord.length) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t// Check if the word is correct\n\t\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.toLowerCase() === this.correctWord.toLowerCase()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// If the word is correct, then make the outline green\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = true;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.goToNextWord();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Incorrect word. Fix by resetting it.\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\treturn Boolean($el.innerText === this.correctWord);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t// The input must be a max and min width, so that it doesn't\n\t\t\t\t\t\t\t\t\t\t// grow or shrink. It must maintain its original width.\t\n\t\t\t\t\t\t\t\t\t\trecalculateWidth() {\n\t\t\t\t\t\t\t\t\t\t\t$el.style.maxWidth = $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.minWidth =  $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.width = '100%';\n\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t\tautocapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\t\tx-bind:data-solved=\"wordIsCorrect ? true : false\"\n\t\t\t\t\t\t\t\t\tdata-index=\"11\"\n\t\t\t\t\t\t\t\t\tdata-underscores=\"____\"\n\t\t\t\t\t\t\t\t\tclass=\"focus-visible:outline-1 cursor-text self-baseline mask-underscores opacity-60 outline-0 rounded-sm inline-flex text-blue-700 dark:text-gray-300\"\n\t\t\t\t\t\t\t\t\tx-init=\"\n\t\t\t\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\t\t\t\trecalculateWidth();\n\t\t\t\t\t\t\t\t\t\t}, 100);\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\tx-on:resize.window=\"recalculateWidth()\"\n\t\t\t\t\t\t\t\t\tx-on:blur=\"$nextTick(() => calculateResults())\"\n\t\t\t\t\t\t\t\t\tx-on:input=\"validateWord(event)\"\n\t\t\t\t\t\t\t\t\tx-on:focus=\"$el.innerText = ''; wordIsCorrect = false;\"\n\t\t\t\t\t\t\t\t>____</span>\n\t\t\t\t\t\t\t</div> truth; give me an undivided heart, that I may fear your name."
  },
  "scriptureText": "<div class=\"text-[inherit] cursor-default align-bottom inline-flex whitespace-nowrap rounded-md focus:outline-2 focus:outline-blue-400\">\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tid=\"firstHiddenWordInput\"\n\t\t\t\t\t\t\t\t\tcontenteditable=\"plaintext-only\"\n\t\t\t\t\t\t\t\t\tx-data=\"{\n\t\t\t\t\t\t\t\t\t\tindex: 0,\n\t\t\t\t\t\t\t\t\t\tcorrectWord: 'Teach',\n\t\t\t\t\t\t\t\t\t\tshowWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tshowWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget numOfWordsToGuess() {\n\t\t\t\t\t\t\t\t\t\t\tconst words = document.querySelectorAll('[contenteditable]');\n\t\t\t\t\t\t\t\t\t\t\treturn words.length;\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tcalculateResults() {\n                      // Get where data-solved exists\n\t\t\t\t\t\t\t\t\t\t\tconst words = Array.from(document.querySelectorAll('[data-solved]'));\n                      const weHaveAWinner = words.length === this.numOfWordsToGuess;\n\t\t\t\t\t\t\t\t\t\t\tif (weHaveAWinner) {\n\t\t\t\t\t\t\t\t\t\t\t\tconst duration = 2 * 1000;\n\t\t\t\t\t\t\t\t\t\t\t\tconst end = Date.now() + duration;\n\n\t\t\t\t\t\t\t\t\t\t\t\t(function frame() {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// launch a few confetti from the left edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 60,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 0 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// and launch a few from the right edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 120,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 1 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// keep going until we are out of time\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (Date.now() < end) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequestAnimationFrame(frame);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}());\n\n                        resetScriptureGuessInputs();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget hiddenWordElsAsArray() {\n\t\t\t\t\t\t\t\t\t\t\tconst nextWords = document.querySelectorAll('[data-index]');\n\t\t\t\t\t\t\t\t\t\t\treturn Array.from(nextWords);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgetHiddenWordFromIndex(index) {\n\t\t\t\t\t\t\t\t\t\t\treturn this.hiddenWordElsAsArray.find((word) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn word.getAttribute('data-index') === index.toString();\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgoToNextWord() {\n\t\t\t\t\t\t\t\t\t\t\t// Find the next word if it exists.\n\t\t\t\t\t\t\t\t\t\t\tif (this.index < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordIndex = this.index + 1;\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordEl;\n\n\t\t\t\t\t\t\t\t\t\t\t\twhile (!nextWordEl && nextWordIndex < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl = this.getHiddenWordFromIndex(nextWordIndex);\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordIndex += 1;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\tif (nextWordEl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.blur();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\twordIsCorrect: false,\n\t\t\t\t\t\t\t\t\t\tvalidateWord(event) {\n\t\t\t\t\t\t\t\t\t\t\t// Allow user to press spacebar without it affecting anything.\n\t\t\t\t\t\t\t\t\t\t\tif (event.data === ' ') {\n\t\t\t\t\t\t\t\t\t\t\t\t// Remove the last character from $el.innerText\n\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = $el.innerText.slice(0, -1);\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.length >= this.correctWord.length) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t// Check if the word is correct\n\t\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.toLowerCase() === this.correctWord.toLowerCase()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// If the word is correct, then make the outline green\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = true;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.goToNextWord();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Incorrect word. Fix by resetting it.\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\treturn Boolean($el.innerText === this.correctWord);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t// The input must be a max and min width, so that it doesn't\n\t\t\t\t\t\t\t\t\t\t// grow or shrink. It must maintain its original width.\t\n\t\t\t\t\t\t\t\t\t\trecalculateWidth() {\n\t\t\t\t\t\t\t\t\t\t\t$el.style.maxWidth = $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.minWidth =  $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.width = '100%';\n\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t\tautocapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\t\tx-bind:data-solved=\"wordIsCorrect ? true : false\"\n\t\t\t\t\t\t\t\t\tdata-index=\"0\"\n\t\t\t\t\t\t\t\t\tdata-underscores=\"_____\"\n\t\t\t\t\t\t\t\t\tclass=\"focus-visible:outline-1 cursor-text self-baseline mask-underscores opacity-60 outline-0 rounded-sm inline-flex text-blue-700 dark:text-gray-300\"\n\t\t\t\t\t\t\t\t\tx-init=\"\n\t\t\t\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\t\t\t\trecalculateWidth();\n\t\t\t\t\t\t\t\t\t\t}, 100);\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\tx-on:resize.window=\"recalculateWidth()\"\n\t\t\t\t\t\t\t\t\tx-on:blur=\"$nextTick(() => calculateResults())\"\n\t\t\t\t\t\t\t\t\tx-on:input=\"validateWord(event)\"\n\t\t\t\t\t\t\t\t\tx-on:focus=\"$el.innerText = ''; wordIsCorrect = false;\"\n\t\t\t\t\t\t\t\t>_____</span>\n\t\t\t\t\t\t\t</div> <div class=\"text-[inherit] cursor-default align-bottom inline-flex whitespace-nowrap rounded-md focus:outline-2 focus:outline-blue-400\">\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tid=\"firstHiddenWordInput\"\n\t\t\t\t\t\t\t\t\tcontenteditable=\"plaintext-only\"\n\t\t\t\t\t\t\t\t\tx-data=\"{\n\t\t\t\t\t\t\t\t\t\tindex: 1,\n\t\t\t\t\t\t\t\t\t\tcorrectWord: 'me',\n\t\t\t\t\t\t\t\t\t\tshowWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tshowWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget numOfWordsToGuess() {\n\t\t\t\t\t\t\t\t\t\t\tconst words = document.querySelectorAll('[contenteditable]');\n\t\t\t\t\t\t\t\t\t\t\treturn words.length;\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tcalculateResults() {\n                      // Get where data-solved exists\n\t\t\t\t\t\t\t\t\t\t\tconst words = Array.from(document.querySelectorAll('[data-solved]'));\n                      const weHaveAWinner = words.length === this.numOfWordsToGuess;\n\t\t\t\t\t\t\t\t\t\t\tif (weHaveAWinner) {\n\t\t\t\t\t\t\t\t\t\t\t\tconst duration = 2 * 1000;\n\t\t\t\t\t\t\t\t\t\t\t\tconst end = Date.now() + duration;\n\n\t\t\t\t\t\t\t\t\t\t\t\t(function frame() {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// launch a few confetti from the left edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 60,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 0 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// and launch a few from the right edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 120,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 1 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// keep going until we are out of time\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (Date.now() < end) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequestAnimationFrame(frame);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}());\n\n                        resetScriptureGuessInputs();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget hiddenWordElsAsArray() {\n\t\t\t\t\t\t\t\t\t\t\tconst nextWords = document.querySelectorAll('[data-index]');\n\t\t\t\t\t\t\t\t\t\t\treturn Array.from(nextWords);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgetHiddenWordFromIndex(index) {\n\t\t\t\t\t\t\t\t\t\t\treturn this.hiddenWordElsAsArray.find((word) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn word.getAttribute('data-index') === index.toString();\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgoToNextWord() {\n\t\t\t\t\t\t\t\t\t\t\t// Find the next word if it exists.\n\t\t\t\t\t\t\t\t\t\t\tif (this.index < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordIndex = this.index + 1;\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordEl;\n\n\t\t\t\t\t\t\t\t\t\t\t\twhile (!nextWordEl && nextWordIndex < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl = this.getHiddenWordFromIndex(nextWordIndex);\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordIndex += 1;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\tif (nextWordEl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.blur();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\twordIsCorrect: false,\n\t\t\t\t\t\t\t\t\t\tvalidateWord(event) {\n\t\t\t\t\t\t\t\t\t\t\t// Allow user to press spacebar without it affecting anything.\n\t\t\t\t\t\t\t\t\t\t\tif (event.data === ' ') {\n\t\t\t\t\t\t\t\t\t\t\t\t// Remove the last character from $el.innerText\n\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = $el.innerText.slice(0, -1);\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.length >= this.correctWord.length) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t// Check if the word is correct\n\t\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.toLowerCase() === this.correctWord.toLowerCase()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// If the word is correct, then make the outline green\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = true;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.goToNextWord();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Incorrect word. Fix by resetting it.\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\treturn Boolean($el.innerText === this.correctWord);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t// The input must be a max and min width, so that it doesn't\n\t\t\t\t\t\t\t\t\t\t// grow or shrink. It must maintain its original width.\t\n\t\t\t\t\t\t\t\t\t\trecalculateWidth() {\n\t\t\t\t\t\t\t\t\t\t\t$el.style.maxWidth = $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.minWidth =  $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.width = '100%';\n\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t\tautocapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\t\tx-bind:data-solved=\"wordIsCorrect ? true : false\"\n\t\t\t\t\t\t\t\t\tdata-index=\"1\"\n\t\t\t\t\t\t\t\t\tdata-underscores=\"__\"\n\t\t\t\t\t\t\t\t\tclass=\"focus-visible:outline-1 cursor-text self-baseline mask-underscores opacity-60 outline-0 rounded-sm inline-flex text-blue-700 dark:text-gray-300\"\n\t\t\t\t\t\t\t\t\tx-init=\"\n\t\t\t\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\t\t\t\trecalculateWidth();\n\t\t\t\t\t\t\t\t\t\t}, 100);\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\tx-on:resize.window=\"recalculateWidth()\"\n\t\t\t\t\t\t\t\t\tx-on:blur=\"$nextTick(() => calculateResults())\"\n\t\t\t\t\t\t\t\t\tx-on:input=\"validateWord(event)\"\n\t\t\t\t\t\t\t\t\tx-on:focus=\"$el.innerText = ''; wordIsCorrect = false;\"\n\t\t\t\t\t\t\t\t>__</span>\n\t\t\t\t\t\t\t</div> <div class=\"text-[inherit] cursor-default align-bottom inline-flex whitespace-nowrap rounded-md focus:outline-2 focus:outline-blue-400\">\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tid=\"firstHiddenWordInput\"\n\t\t\t\t\t\t\t\t\tcontenteditable=\"plaintext-only\"\n\t\t\t\t\t\t\t\t\tx-data=\"{\n\t\t\t\t\t\t\t\t\t\tindex: 2,\n\t\t\t\t\t\t\t\t\t\tcorrectWord: 'your',\n\t\t\t\t\t\t\t\t\t\tshowWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tshowWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget numOfWordsToGuess() {\n\t\t\t\t\t\t\t\t\t\t\tconst words = document.querySelectorAll('[contenteditable]');\n\t\t\t\t\t\t\t\t\t\t\treturn words.length;\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tcalculateResults() {\n                      // Get where data-solved exists\n\t\t\t\t\t\t\t\t\t\t\tconst words = Array.from(document.querySelectorAll('[data-solved]'));\n                      const weHaveAWinner = words.length === this.numOfWordsToGuess;\n\t\t\t\t\t\t\t\t\t\t\tif (weHaveAWinner) {\n\t\t\t\t\t\t\t\t\t\t\t\tconst duration = 2 * 1000;\n\t\t\t\t\t\t\t\t\t\t\t\tconst end = Date.now() + duration;\n\n\t\t\t\t\t\t\t\t\t\t\t\t(function frame() {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// launch a few confetti from the left edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 60,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 0 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// and launch a few from the right edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 120,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 1 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// keep going until we are out of time\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (Date.now() < end) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequestAnimationFrame(frame);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}());\n\n                        resetScriptureGuessInputs();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget hiddenWordElsAsArray() {\n\t\t\t\t\t\t\t\t\t\t\tconst nextWords = document.querySelectorAll('[data-index]');\n\t\t\t\t\t\t\t\t\t\t\treturn Array.from(nextWords);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgetHiddenWordFromIndex(index) {\n\t\t\t\t\t\t\t\t\t\t\treturn this.hiddenWordElsAsArray.find((word) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn word.getAttribute('data-index') === index.toString();\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgoToNextWord() {\n\t\t\t\t\t\t\t\t\t\t\t// Find the next word if it exists.\n\t\t\t\t\t\t\t\t\t\t\tif (this.index < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordIndex = this.index + 1;\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordEl;\n\n\t\t\t\t\t\t\t\t\t\t\t\twhile (!nextWordEl && nextWordIndex < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl = this.getHiddenWordFromIndex(nextWordIndex);\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordIndex += 1;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\tif (nextWordEl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.blur();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\twordIsCorrect: false,\n\t\t\t\t\t\t\t\t\t\tvalidateWord(event) {\n\t\t\t\t\t\t\t\t\t\t\t// Allow user to press spacebar without it affecting anything.\n\t\t\t\t\t\t\t\t\t\t\tif (event.data === ' ') {\n\t\t\t\t\t\t\t\t\t\t\t\t// Remove the last character from $el.innerText\n\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = $el.innerText.slice(0, -1);\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.length >= this.correctWord.length) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t// Check if the word is correct\n\t\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.toLowerCase() === this.correctWord.toLowerCase()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// If the word is correct, then make the outline green\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = true;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.goToNextWord();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Incorrect word. Fix by resetting it.\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\treturn Boolean($el.innerText === this.correctWord);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t// The input must be a max and min width, so that it doesn't\n\t\t\t\t\t\t\t\t\t\t// grow or shrink. It must maintain its original width.\t\n\t\t\t\t\t\t\t\t\t\trecalculateWidth() {\n\t\t\t\t\t\t\t\t\t\t\t$el.style.maxWidth = $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.minWidth =  $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.width = '100%';\n\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t\tautocapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\t\tx-bind:data-solved=\"wordIsCorrect ? true : false\"\n\t\t\t\t\t\t\t\t\tdata-index=\"2\"\n\t\t\t\t\t\t\t\t\tdata-underscores=\"____\"\n\t\t\t\t\t\t\t\t\tclass=\"focus-visible:outline-1 cursor-text self-baseline mask-underscores opacity-60 outline-0 rounded-sm inline-flex text-blue-700 dark:text-gray-300\"\n\t\t\t\t\t\t\t\t\tx-init=\"\n\t\t\t\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\t\t\t\trecalculateWidth();\n\t\t\t\t\t\t\t\t\t\t}, 100);\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\tx-on:resize.window=\"recalculateWidth()\"\n\t\t\t\t\t\t\t\t\tx-on:blur=\"$nextTick(() => calculateResults())\"\n\t\t\t\t\t\t\t\t\tx-on:input=\"validateWord(event)\"\n\t\t\t\t\t\t\t\t\tx-on:focus=\"$el.innerText = ''; wordIsCorrect = false;\"\n\t\t\t\t\t\t\t\t>____</span>\n\t\t\t\t\t\t\t</div> <div class=\"text-[inherit] cursor-default align-bottom inline-flex whitespace-nowrap rounded-md focus:outline-2 focus:outline-blue-400\">\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tid=\"firstHiddenWordInput\"\n\t\t\t\t\t\t\t\t\tcontenteditable=\"plaintext-only\"\n\t\t\t\t\t\t\t\t\tx-data=\"{\n\t\t\t\t\t\t\t\t\t\tindex: 3,\n\t\t\t\t\t\t\t\t\t\tcorrectWord: 'way',\n\t\t\t\t\t\t\t\t\t\tshowWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tshowWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget numOfWordsToGuess() {\n\t\t\t\t\t\t\t\t\t\t\tconst words = document.querySelectorAll('[contenteditable]');\n\t\t\t\t\t\t\t\t\t\t\treturn words.length;\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tcalculateResults() {\n                      // Get where data-solved exists\n\t\t\t\t\t\t\t\t\t\t\tconst words = Array.from(document.querySelectorAll('[data-solved]'));\n                      const weHaveAWinner = words.length === this.numOfWordsToGuess;\n\t\t\t\t\t\t\t\t\t\t\tif (weHaveAWinner) {\n\t\t\t\t\t\t\t\t\t\t\t\tconst duration = 2 * 1000;\n\t\t\t\t\t\t\t\t\t\t\t\tconst end = Date.now() + duration;\n\n\t\t\t\t\t\t\t\t\t\t\t\t(function frame() {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// launch a few confetti from the left edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 60,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 0 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// and launch a few from the right edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 120,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 1 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// keep going until we are out of time\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (Date.now() < end) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequestAnimationFrame(frame);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}());\n\n                        resetScriptureGuessInputs();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget hiddenWordElsAsArray() {\n\t\t\t\t\t\t\t\t\t\t\tconst nextWords = document.querySelectorAll('[data-index]');\n\t\t\t\t\t\t\t\t\t\t\treturn Array.from(nextWords);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgetHiddenWordFromIndex(index) {\n\t\t\t\t\t\t\t\t\t\t\treturn this.hiddenWordElsAsArray.find((word) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn word.getAttribute('data-index') === index.toString();\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgoToNextWord() {\n\t\t\t\t\t\t\t\t\t\t\t// Find the next word if it exists.\n\t\t\t\t\t\t\t\t\t\t\tif (this.index < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordIndex = this.index + 1;\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordEl;\n\n\t\t\t\t\t\t\t\t\t\t\t\twhile (!nextWordEl && nextWordIndex < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl = this.getHiddenWordFromIndex(nextWordIndex);\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordIndex += 1;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\tif (nextWordEl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.blur();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\twordIsCorrect: false,\n\t\t\t\t\t\t\t\t\t\tvalidateWord(event) {\n\t\t\t\t\t\t\t\t\t\t\t// Allow user to press spacebar without it affecting anything.\n\t\t\t\t\t\t\t\t\t\t\tif (event.data === ' ') {\n\t\t\t\t\t\t\t\t\t\t\t\t// Remove the last character from $el.innerText\n\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = $el.innerText.slice(0, -1);\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.length >= this.correctWord.length) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t// Check if the word is correct\n\t\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.toLowerCase() === this.correctWord.toLowerCase()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// If the word is correct, then make the outline green\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = true;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.goToNextWord();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Incorrect word. Fix by resetting it.\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\treturn Boolean($el.innerText === this.correctWord);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t// The input must be a max and min width, so that it doesn't\n\t\t\t\t\t\t\t\t\t\t// grow or shrink. It must maintain its original width.\t\n\t\t\t\t\t\t\t\t\t\trecalculateWidth() {\n\t\t\t\t\t\t\t\t\t\t\t$el.style.maxWidth = $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.minWidth =  $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.width = '100%';\n\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t\tautocapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\t\tx-bind:data-solved=\"wordIsCorrect ? true : false\"\n\t\t\t\t\t\t\t\t\tdata-index=\"3\"\n\t\t\t\t\t\t\t\t\tdata-underscores=\"___\"\n\t\t\t\t\t\t\t\t\tclass=\"focus-visible:outline-1 cursor-text self-baseline mask-underscores opacity-60 outline-0 rounded-sm inline-flex text-blue-700 dark:text-gray-300\"\n\t\t\t\t\t\t\t\t\tx-init=\"\n\t\t\t\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\t\t\t\trecalculateWidth();\n\t\t\t\t\t\t\t\t\t\t}, 100);\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\tx-on:resize.window=\"recalculateWidth()\"\n\t\t\t\t\t\t\t\t\tx-on:blur=\"$nextTick(() => calculateResults())\"\n\t\t\t\t\t\t\t\t\tx-on:input=\"validateWord(event)\"\n\t\t\t\t\t\t\t\t\tx-on:focus=\"$el.innerText = ''; wordIsCorrect = false;\"\n\t\t\t\t\t\t\t\t>___</span>,\n\t\t\t\t\t\t\t</div> <div class=\"text-[inherit] cursor-default align-bottom inline-flex whitespace-nowrap rounded-md focus:outline-2 focus:outline-blue-400\">\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tid=\"firstHiddenWordInput\"\n\t\t\t\t\t\t\t\t\tcontenteditable=\"plaintext-only\"\n\t\t\t\t\t\t\t\t\tx-data=\"{\n\t\t\t\t\t\t\t\t\t\tindex: 4,\n\t\t\t\t\t\t\t\t\t\tcorrectWord: 'O',\n\t\t\t\t\t\t\t\t\t\tshowWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tshowWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget numOfWordsToGuess() {\n\t\t\t\t\t\t\t\t\t\t\tconst words = document.querySelectorAll('[contenteditable]');\n\t\t\t\t\t\t\t\t\t\t\treturn words.length;\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tcalculateResults() {\n                      // Get where data-solved exists\n\t\t\t\t\t\t\t\t\t\t\tconst words = Array.from(document.querySelectorAll('[data-solved]'));\n                      const weHaveAWinner = words.length === this.numOfWordsToGuess;\n\t\t\t\t\t\t\t\t\t\t\tif (weHaveAWinner) {\n\t\t\t\t\t\t\t\t\t\t\t\tconst duration = 2 * 1000;\n\t\t\t\t\t\t\t\t\t\t\t\tconst end = Date.now() + duration;\n\n\t\t\t\t\t\t\t\t\t\t\t\t(function frame() {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// launch a few confetti from the left edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 60,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 0 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// and launch a few from the right edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 120,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 1 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// keep going until we are out of time\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (Date.now() < end) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequestAnimationFrame(frame);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}());\n\n                        resetScriptureGuessInputs();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget hiddenWordElsAsArray() {\n\t\t\t\t\t\t\t\t\t\t\tconst nextWords = document.querySelectorAll('[data-index]');\n\t\t\t\t\t\t\t\t\t\t\treturn Array.from(nextWords);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgetHiddenWordFromIndex(index) {\n\t\t\t\t\t\t\t\t\t\t\treturn this.hiddenWordElsAsArray.find((word) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn word.getAttribute('data-index') === index.toString();\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgoToNextWord() {\n\t\t\t\t\t\t\t\t\t\t\t// Find the next word if it exists.\n\t\t\t\t\t\t\t\t\t\t\tif (this.index < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordIndex = this.index + 1;\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordEl;\n\n\t\t\t\t\t\t\t\t\t\t\t\twhile (!nextWordEl && nextWordIndex < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl = this.getHiddenWordFromIndex(nextWordIndex);\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordIndex += 1;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\tif (nextWordEl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.blur();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\twordIsCorrect: false,\n\t\t\t\t\t\t\t\t\t\tvalidateWord(event) {\n\t\t\t\t\t\t\t\t\t\t\t// Allow user to press spacebar without it affecting anything.\n\t\t\t\t\t\t\t\t\t\t\tif (event.data === ' ') {\n\t\t\t\t\t\t\t\t\t\t\t\t// Remove the last character from $el.innerText\n\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = $el.innerText.slice(0, -1);\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.length >= this.correctWord.length) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t// Check if the word is correct\n\t\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.toLowerCase() === this.correctWord.toLowerCase()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// If the word is correct, then make the outline green\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = true;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.goToNextWord();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Incorrect word. Fix by resetting it.\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\treturn Boolean($el.innerText === this.correctWord);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t// The input must be a max and min width, so that it doesn't\n\t\t\t\t\t\t\t\t\t\t// grow or shrink. It must maintain its original width.\t\n\t\t\t\t\t\t\t\t\t\trecalculateWidth() {\n\t\t\t\t\t\t\t\t\t\t\t$el.style.maxWidth = $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.minWidth =  $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.width = '100%';\n\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t\tautocapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\t\tx-bind:data-solved=\"wordIsCorrect ? true : false\"\n\t\t\t\t\t\t\t\t\tdata-index=\"4\"\n\t\t\t\t\t\t\t\t\tdata-underscores=\"_\"\n\t\t\t\t\t\t\t\t\tclass=\"focus-visible:outline-1 cursor-text self-baseline mask-underscores opacity-60 outline-0 rounded-sm inline-flex text-blue-700 dark:text-gray-300\"\n\t\t\t\t\t\t\t\t\tx-init=\"\n\t\t\t\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\t\t\t\trecalculateWidth();\n\t\t\t\t\t\t\t\t\t\t}, 100);\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\tx-on:resize.window=\"recalculateWidth()\"\n\t\t\t\t\t\t\t\t\tx-on:blur=\"$nextTick(() => calculateResults())\"\n\t\t\t\t\t\t\t\t\tx-on:input=\"validateWord(event)\"\n\t\t\t\t\t\t\t\t\tx-on:focus=\"$el.innerText = ''; wordIsCorrect = false;\"\n\t\t\t\t\t\t\t\t>_</span>\n\t\t\t\t\t\t\t</div> <div class=\"text-[inherit] cursor-default align-bottom inline-flex whitespace-nowrap rounded-md focus:outline-2 focus:outline-blue-400\">\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tid=\"firstHiddenWordInput\"\n\t\t\t\t\t\t\t\t\tcontenteditable=\"plaintext-only\"\n\t\t\t\t\t\t\t\t\tx-data=\"{\n\t\t\t\t\t\t\t\t\t\tindex: 5,\n\t\t\t\t\t\t\t\t\t\tcorrectWord: 'Lord',\n\t\t\t\t\t\t\t\t\t\tshowWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tshowWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget numOfWordsToGuess() {\n\t\t\t\t\t\t\t\t\t\t\tconst words = document.querySelectorAll('[contenteditable]');\n\t\t\t\t\t\t\t\t\t\t\treturn words.length;\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tcalculateResults() {\n                      // Get where data-solved exists\n\t\t\t\t\t\t\t\t\t\t\tconst words = Array.from(document.querySelectorAll('[data-solved]'));\n                      const weHaveAWinner = words.length === this.numOfWordsToGuess;\n\t\t\t\t\t\t\t\t\t\t\tif (weHaveAWinner) {\n\t\t\t\t\t\t\t\t\t\t\t\tconst duration = 2 * 1000;\n\t\t\t\t\t\t\t\t\t\t\t\tconst end = Date.now() + duration;\n\n\t\t\t\t\t\t\t\t\t\t\t\t(function frame() {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// launch a few confetti from the left edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 60,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 0 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// and launch a few from the right edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 120,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 1 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// keep going until we are out of time\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (Date.now() < end) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequestAnimationFrame(frame);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}());\n\n                        resetScriptureGuessInputs();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget hiddenWordElsAsArray() {\n\t\t\t\t\t\t\t\t\t\t\tconst nextWords = document.querySelectorAll('[data-index]');\n\t\t\t\t\t\t\t\t\t\t\treturn Array.from(nextWords);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgetHiddenWordFromIndex(index) {\n\t\t\t\t\t\t\t\t\t\t\treturn this.hiddenWordElsAsArray.find((word) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn word.getAttribute('data-index') === index.toString();\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgoToNextWord() {\n\t\t\t\t\t\t\t\t\t\t\t// Find the next word if it exists.\n\t\t\t\t\t\t\t\t\t\t\tif (this.index < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordIndex = this.index + 1;\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordEl;\n\n\t\t\t\t\t\t\t\t\t\t\t\twhile (!nextWordEl && nextWordIndex < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl = this.getHiddenWordFromIndex(nextWordIndex);\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordIndex += 1;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\tif (nextWordEl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.blur();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\twordIsCorrect: false,\n\t\t\t\t\t\t\t\t\t\tvalidateWord(event) {\n\t\t\t\t\t\t\t\t\t\t\t// Allow user to press spacebar without it affecting anything.\n\t\t\t\t\t\t\t\t\t\t\tif (event.data === ' ') {\n\t\t\t\t\t\t\t\t\t\t\t\t// Remove the last character from $el.innerText\n\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = $el.innerText.slice(0, -1);\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.length >= this.correctWord.length) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t// Check if the word is correct\n\t\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.toLowerCase() === this.correctWord.toLowerCase()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// If the word is correct, then make the outline green\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = true;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.goToNextWord();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Incorrect word. Fix by resetting it.\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\treturn Boolean($el.innerText === this.correctWord);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t// The input must be a max and min width, so that it doesn't\n\t\t\t\t\t\t\t\t\t\t// grow or shrink. It must maintain its original width.\t\n\t\t\t\t\t\t\t\t\t\trecalculateWidth() {\n\t\t\t\t\t\t\t\t\t\t\t$el.style.maxWidth = $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.minWidth =  $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.width = '100%';\n\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t\tautocapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\t\tx-bind:data-solved=\"wordIsCorrect ? true : false\"\n\t\t\t\t\t\t\t\t\tdata-index=\"5\"\n\t\t\t\t\t\t\t\t\tdata-underscores=\"____\"\n\t\t\t\t\t\t\t\t\tclass=\"focus-visible:outline-1 cursor-text self-baseline mask-underscores opacity-60 outline-0 rounded-sm inline-flex text-blue-700 dark:text-gray-300\"\n\t\t\t\t\t\t\t\t\tx-init=\"\n\t\t\t\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\t\t\t\trecalculateWidth();\n\t\t\t\t\t\t\t\t\t\t}, 100);\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\tx-on:resize.window=\"recalculateWidth()\"\n\t\t\t\t\t\t\t\t\tx-on:blur=\"$nextTick(() => calculateResults())\"\n\t\t\t\t\t\t\t\t\tx-on:input=\"validateWord(event)\"\n\t\t\t\t\t\t\t\t\tx-on:focus=\"$el.innerText = ''; wordIsCorrect = false;\"\n\t\t\t\t\t\t\t\t>____</span>,\n\t\t\t\t\t\t\t</div> <div class=\"text-[inherit] cursor-default align-bottom inline-flex whitespace-nowrap rounded-md focus:outline-2 focus:outline-blue-400\">\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tid=\"firstHiddenWordInput\"\n\t\t\t\t\t\t\t\t\tcontenteditable=\"plaintext-only\"\n\t\t\t\t\t\t\t\t\tx-data=\"{\n\t\t\t\t\t\t\t\t\t\tindex: 6,\n\t\t\t\t\t\t\t\t\t\tcorrectWord: 'and',\n\t\t\t\t\t\t\t\t\t\tshowWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tshowWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget numOfWordsToGuess() {\n\t\t\t\t\t\t\t\t\t\t\tconst words = document.querySelectorAll('[contenteditable]');\n\t\t\t\t\t\t\t\t\t\t\treturn words.length;\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tcalculateResults() {\n                      // Get where data-solved exists\n\t\t\t\t\t\t\t\t\t\t\tconst words = Array.from(document.querySelectorAll('[data-solved]'));\n                      const weHaveAWinner = words.length === this.numOfWordsToGuess;\n\t\t\t\t\t\t\t\t\t\t\tif (weHaveAWinner) {\n\t\t\t\t\t\t\t\t\t\t\t\tconst duration = 2 * 1000;\n\t\t\t\t\t\t\t\t\t\t\t\tconst end = Date.now() + duration;\n\n\t\t\t\t\t\t\t\t\t\t\t\t(function frame() {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// launch a few confetti from the left edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 60,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 0 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// and launch a few from the right edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 120,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 1 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// keep going until we are out of time\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (Date.now() < end) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequestAnimationFrame(frame);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}());\n\n                        resetScriptureGuessInputs();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget hiddenWordElsAsArray() {\n\t\t\t\t\t\t\t\t\t\t\tconst nextWords = document.querySelectorAll('[data-index]');\n\t\t\t\t\t\t\t\t\t\t\treturn Array.from(nextWords);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgetHiddenWordFromIndex(index) {\n\t\t\t\t\t\t\t\t\t\t\treturn this.hiddenWordElsAsArray.find((word) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn word.getAttribute('data-index') === index.toString();\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgoToNextWord() {\n\t\t\t\t\t\t\t\t\t\t\t// Find the next word if it exists.\n\t\t\t\t\t\t\t\t\t\t\tif (this.index < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordIndex = this.index + 1;\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordEl;\n\n\t\t\t\t\t\t\t\t\t\t\t\twhile (!nextWordEl && nextWordIndex < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl = this.getHiddenWordFromIndex(nextWordIndex);\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordIndex += 1;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\tif (nextWordEl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.blur();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\twordIsCorrect: false,\n\t\t\t\t\t\t\t\t\t\tvalidateWord(event) {\n\t\t\t\t\t\t\t\t\t\t\t// Allow user to press spacebar without it affecting anything.\n\t\t\t\t\t\t\t\t\t\t\tif (event.data === ' ') {\n\t\t\t\t\t\t\t\t\t\t\t\t// Remove the last character from $el.innerText\n\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = $el.innerText.slice(0, -1);\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.length >= this.correctWord.length) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t// Check if the word is correct\n\t\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.toLowerCase() === this.correctWord.toLowerCase()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// If the word is correct, then make the outline green\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = true;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.goToNextWord();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Incorrect word. Fix by resetting it.\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\treturn Boolean($el.innerText === this.correctWord);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t// The input must be a max and min width, so that it doesn't\n\t\t\t\t\t\t\t\t\t\t// grow or shrink. It must maintain its original width.\t\n\t\t\t\t\t\t\t\t\t\trecalculateWidth() {\n\t\t\t\t\t\t\t\t\t\t\t$el.style.maxWidth = $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.minWidth =  $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.width = '100%';\n\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t\tautocapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\t\tx-bind:data-solved=\"wordIsCorrect ? true : false\"\n\t\t\t\t\t\t\t\t\tdata-index=\"6\"\n\t\t\t\t\t\t\t\t\tdata-underscores=\"___\"\n\t\t\t\t\t\t\t\t\tclass=\"focus-visible:outline-1 cursor-text self-baseline mask-underscores opacity-60 outline-0 rounded-sm inline-flex text-blue-700 dark:text-gray-300\"\n\t\t\t\t\t\t\t\t\tx-init=\"\n\t\t\t\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\t\t\t\trecalculateWidth();\n\t\t\t\t\t\t\t\t\t\t}, 100);\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\tx-on:resize.window=\"recalculateWidth()\"\n\t\t\t\t\t\t\t\t\tx-on:blur=\"$nextTick(() => calculateResults())\"\n\t\t\t\t\t\t\t\t\tx-on:input=\"validateWord(event)\"\n\t\t\t\t\t\t\t\t\tx-on:focus=\"$el.innerText = ''; wordIsCorrect = false;\"\n\t\t\t\t\t\t\t\t>___</span>\n\t\t\t\t\t\t\t</div> <div class=\"text-[inherit] cursor-default align-bottom inline-flex whitespace-nowrap rounded-md focus:outline-2 focus:outline-blue-400\">\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tid=\"firstHiddenWordInput\"\n\t\t\t\t\t\t\t\t\tcontenteditable=\"plaintext-only\"\n\t\t\t\t\t\t\t\t\tx-data=\"{\n\t\t\t\t\t\t\t\t\t\tindex: 7,\n\t\t\t\t\t\t\t\t\t\tcorrectWord: 'I',\n\t\t\t\t\t\t\t\t\t\tshowWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tshowWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget numOfWordsToGuess() {\n\t\t\t\t\t\t\t\t\t\t\tconst words = document.querySelectorAll('[contenteditable]');\n\t\t\t\t\t\t\t\t\t\t\treturn words.length;\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tcalculateResults() {\n                      // Get where data-solved exists\n\t\t\t\t\t\t\t\t\t\t\tconst words = Array.from(document.querySelectorAll('[data-solved]'));\n                      const weHaveAWinner = words.length === this.numOfWordsToGuess;\n\t\t\t\t\t\t\t\t\t\t\tif (weHaveAWinner) {\n\t\t\t\t\t\t\t\t\t\t\t\tconst duration = 2 * 1000;\n\t\t\t\t\t\t\t\t\t\t\t\tconst end = Date.now() + duration;\n\n\t\t\t\t\t\t\t\t\t\t\t\t(function frame() {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// launch a few confetti from the left edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 60,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 0 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// and launch a few from the right edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 120,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 1 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// keep going until we are out of time\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (Date.now() < end) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequestAnimationFrame(frame);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}());\n\n                        resetScriptureGuessInputs();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget hiddenWordElsAsArray() {\n\t\t\t\t\t\t\t\t\t\t\tconst nextWords = document.querySelectorAll('[data-index]');\n\t\t\t\t\t\t\t\t\t\t\treturn Array.from(nextWords);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgetHiddenWordFromIndex(index) {\n\t\t\t\t\t\t\t\t\t\t\treturn this.hiddenWordElsAsArray.find((word) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn word.getAttribute('data-index') === index.toString();\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgoToNextWord() {\n\t\t\t\t\t\t\t\t\t\t\t// Find the next word if it exists.\n\t\t\t\t\t\t\t\t\t\t\tif (this.index < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordIndex = this.index + 1;\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordEl;\n\n\t\t\t\t\t\t\t\t\t\t\t\twhile (!nextWordEl && nextWordIndex < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl = this.getHiddenWordFromIndex(nextWordIndex);\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordIndex += 1;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\tif (nextWordEl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.blur();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\twordIsCorrect: false,\n\t\t\t\t\t\t\t\t\t\tvalidateWord(event) {\n\t\t\t\t\t\t\t\t\t\t\t// Allow user to press spacebar without it affecting anything.\n\t\t\t\t\t\t\t\t\t\t\tif (event.data === ' ') {\n\t\t\t\t\t\t\t\t\t\t\t\t// Remove the last character from $el.innerText\n\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = $el.innerText.slice(0, -1);\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.length >= this.correctWord.length) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t// Check if the word is correct\n\t\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.toLowerCase() === this.correctWord.toLowerCase()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// If the word is correct, then make the outline green\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = true;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.goToNextWord();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Incorrect word. Fix by resetting it.\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\treturn Boolean($el.innerText === this.correctWord);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t// The input must be a max and min width, so that it doesn't\n\t\t\t\t\t\t\t\t\t\t// grow or shrink. It must maintain its original width.\t\n\t\t\t\t\t\t\t\t\t\trecalculateWidth() {\n\t\t\t\t\t\t\t\t\t\t\t$el.style.maxWidth = $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.minWidth =  $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.width = '100%';\n\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t\tautocapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\t\tx-bind:data-solved=\"wordIsCorrect ? true : false\"\n\t\t\t\t\t\t\t\t\tdata-index=\"7\"\n\t\t\t\t\t\t\t\t\tdata-underscores=\"_\"\n\t\t\t\t\t\t\t\t\tclass=\"focus-visible:outline-1 cursor-text self-baseline mask-underscores opacity-60 outline-0 rounded-sm inline-flex text-blue-700 dark:text-gray-300\"\n\t\t\t\t\t\t\t\t\tx-init=\"\n\t\t\t\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\t\t\t\trecalculateWidth();\n\t\t\t\t\t\t\t\t\t\t}, 100);\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\tx-on:resize.window=\"recalculateWidth()\"\n\t\t\t\t\t\t\t\t\tx-on:blur=\"$nextTick(() => calculateResults())\"\n\t\t\t\t\t\t\t\t\tx-on:input=\"validateWord(event)\"\n\t\t\t\t\t\t\t\t\tx-on:focus=\"$el.innerText = ''; wordIsCorrect = false;\"\n\t\t\t\t\t\t\t\t>_</span>\n\t\t\t\t\t\t\t</div> <div class=\"text-[inherit] cursor-default align-bottom inline-flex whitespace-nowrap rounded-md focus:outline-2 focus:outline-blue-400\">\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tid=\"firstHiddenWordInput\"\n\t\t\t\t\t\t\t\t\tcontenteditable=\"plaintext-only\"\n\t\t\t\t\t\t\t\t\tx-data=\"{\n\t\t\t\t\t\t\t\t\t\tindex: 8,\n\t\t\t\t\t\t\t\t\t\tcorrectWord: 'will',\n\t\t\t\t\t\t\t\t\t\tshowWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tshowWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget numOfWordsToGuess() {\n\t\t\t\t\t\t\t\t\t\t\tconst words = document.querySelectorAll('[contenteditable]');\n\t\t\t\t\t\t\t\t\t\t\treturn words.length;\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tcalculateResults() {\n                      // Get where data-solved exists\n\t\t\t\t\t\t\t\t\t\t\tconst words = Array.from(document.querySelectorAll('[data-solved]'));\n                      const weHaveAWinner = words.length === this.numOfWordsToGuess;\n\t\t\t\t\t\t\t\t\t\t\tif (weHaveAWinner) {\n\t\t\t\t\t\t\t\t\t\t\t\tconst duration = 2 * 1000;\n\t\t\t\t\t\t\t\t\t\t\t\tconst end = Date.now() + duration;\n\n\t\t\t\t\t\t\t\t\t\t\t\t(function frame() {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// launch a few confetti from the left edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 60,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 0 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// and launch a few from the right edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 120,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 1 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// keep going until we are out of time\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (Date.now() < end) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequestAnimationFrame(frame);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}());\n\n                        resetScriptureGuessInputs();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget hiddenWordElsAsArray() {\n\t\t\t\t\t\t\t\t\t\t\tconst nextWords = document.querySelectorAll('[data-index]');\n\t\t\t\t\t\t\t\t\t\t\treturn Array.from(nextWords);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgetHiddenWordFromIndex(index) {\n\t\t\t\t\t\t\t\t\t\t\treturn this.hiddenWordElsAsArray.find((word) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn word.getAttribute('data-index') === index.toString();\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgoToNextWord() {\n\t\t\t\t\t\t\t\t\t\t\t// Find the next word if it exists.\n\t\t\t\t\t\t\t\t\t\t\tif (this.index < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordIndex = this.index + 1;\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordEl;\n\n\t\t\t\t\t\t\t\t\t\t\t\twhile (!nextWordEl && nextWordIndex < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl = this.getHiddenWordFromIndex(nextWordIndex);\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordIndex += 1;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\tif (nextWordEl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.blur();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\twordIsCorrect: false,\n\t\t\t\t\t\t\t\t\t\tvalidateWord(event) {\n\t\t\t\t\t\t\t\t\t\t\t// Allow user to press spacebar without it affecting anything.\n\t\t\t\t\t\t\t\t\t\t\tif (event.data === ' ') {\n\t\t\t\t\t\t\t\t\t\t\t\t// Remove the last character from $el.innerText\n\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = $el.innerText.slice(0, -1);\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.length >= this.correctWord.length) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t// Check if the word is correct\n\t\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.toLowerCase() === this.correctWord.toLowerCase()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// If the word is correct, then make the outline green\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = true;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.goToNextWord();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Incorrect word. Fix by resetting it.\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\treturn Boolean($el.innerText === this.correctWord);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t// The input must be a max and min width, so that it doesn't\n\t\t\t\t\t\t\t\t\t\t// grow or shrink. It must maintain its original width.\t\n\t\t\t\t\t\t\t\t\t\trecalculateWidth() {\n\t\t\t\t\t\t\t\t\t\t\t$el.style.maxWidth = $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.minWidth =  $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.width = '100%';\n\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t\tautocapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\t\tx-bind:data-solved=\"wordIsCorrect ? true : false\"\n\t\t\t\t\t\t\t\t\tdata-index=\"8\"\n\t\t\t\t\t\t\t\t\tdata-underscores=\"____\"\n\t\t\t\t\t\t\t\t\tclass=\"focus-visible:outline-1 cursor-text self-baseline mask-underscores opacity-60 outline-0 rounded-sm inline-flex text-blue-700 dark:text-gray-300\"\n\t\t\t\t\t\t\t\t\tx-init=\"\n\t\t\t\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\t\t\t\trecalculateWidth();\n\t\t\t\t\t\t\t\t\t\t}, 100);\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\tx-on:resize.window=\"recalculateWidth()\"\n\t\t\t\t\t\t\t\t\tx-on:blur=\"$nextTick(() => calculateResults())\"\n\t\t\t\t\t\t\t\t\tx-on:input=\"validateWord(event)\"\n\t\t\t\t\t\t\t\t\tx-on:focus=\"$el.innerText = ''; wordIsCorrect = false;\"\n\t\t\t\t\t\t\t\t>____</span>\n\t\t\t\t\t\t\t</div> <div class=\"text-[inherit] cursor-default align-bottom inline-flex whitespace-nowrap rounded-md focus:outline-2 focus:outline-blue-400\">\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tid=\"firstHiddenWordInput\"\n\t\t\t\t\t\t\t\t\tcontenteditable=\"plaintext-only\"\n\t\t\t\t\t\t\t\t\tx-data=\"{\n\t\t\t\t\t\t\t\t\t\tindex: 9,\n\t\t\t\t\t\t\t\t\t\tcorrectWord: 'walk',\n\t\t\t\t\t\t\t\t\t\tshowWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tshowWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget numOfWordsToGuess() {\n\t\t\t\t\t\t\t\t\t\t\tconst words = document.querySelectorAll('[contenteditable]');\n\t\t\t\t\t\t\t\t\t\t\treturn words.length;\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tcalculateResults() {\n                      // Get where data-solved exists\n\t\t\t\t\t\t\t\t\t\t\tconst words = Array.from(document.querySelectorAll('[data-solved]'));\n                      const weHaveAWinner = words.length === this.numOfWordsToGuess;\n\t\t\t\t\t\t\t\t\t\t\tif (weHaveAWinner) {\n\t\t\t\t\t\t\t\t\t\t\t\tconst duration = 2 * 1000;\n\t\t\t\t\t\t\t\t\t\t\t\tconst end = Date.now() + duration;\n\n\t\t\t\t\t\t\t\t\t\t\t\t(function frame() {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// launch a few confetti from the left edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 60,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 0 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// and launch a few from the right edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 120,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 1 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// keep going until we are out of time\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (Date.now() < end) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequestAnimationFrame(frame);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}());\n\n                        resetScriptureGuessInputs();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget hiddenWordElsAsArray() {\n\t\t\t\t\t\t\t\t\t\t\tconst nextWords = document.querySelectorAll('[data-index]');\n\t\t\t\t\t\t\t\t\t\t\treturn Array.from(nextWords);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgetHiddenWordFromIndex(index) {\n\t\t\t\t\t\t\t\t\t\t\treturn this.hiddenWordElsAsArray.find((word) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn word.getAttribute('data-index') === index.toString();\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgoToNextWord() {\n\t\t\t\t\t\t\t\t\t\t\t// Find the next word if it exists.\n\t\t\t\t\t\t\t\t\t\t\tif (this.index < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordIndex = this.index + 1;\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordEl;\n\n\t\t\t\t\t\t\t\t\t\t\t\twhile (!nextWordEl && nextWordIndex < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl = this.getHiddenWordFromIndex(nextWordIndex);\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordIndex += 1;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\tif (nextWordEl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.blur();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\twordIsCorrect: false,\n\t\t\t\t\t\t\t\t\t\tvalidateWord(event) {\n\t\t\t\t\t\t\t\t\t\t\t// Allow user to press spacebar without it affecting anything.\n\t\t\t\t\t\t\t\t\t\t\tif (event.data === ' ') {\n\t\t\t\t\t\t\t\t\t\t\t\t// Remove the last character from $el.innerText\n\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = $el.innerText.slice(0, -1);\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.length >= this.correctWord.length) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t// Check if the word is correct\n\t\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.toLowerCase() === this.correctWord.toLowerCase()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// If the word is correct, then make the outline green\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = true;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.goToNextWord();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Incorrect word. Fix by resetting it.\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\treturn Boolean($el.innerText === this.correctWord);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t// The input must be a max and min width, so that it doesn't\n\t\t\t\t\t\t\t\t\t\t// grow or shrink. It must maintain its original width.\t\n\t\t\t\t\t\t\t\t\t\trecalculateWidth() {\n\t\t\t\t\t\t\t\t\t\t\t$el.style.maxWidth = $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.minWidth =  $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.width = '100%';\n\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t\tautocapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\t\tx-bind:data-solved=\"wordIsCorrect ? true : false\"\n\t\t\t\t\t\t\t\t\tdata-index=\"9\"\n\t\t\t\t\t\t\t\t\tdata-underscores=\"____\"\n\t\t\t\t\t\t\t\t\tclass=\"focus-visible:outline-1 cursor-text self-baseline mask-underscores opacity-60 outline-0 rounded-sm inline-flex text-blue-700 dark:text-gray-300\"\n\t\t\t\t\t\t\t\t\tx-init=\"\n\t\t\t\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\t\t\t\trecalculateWidth();\n\t\t\t\t\t\t\t\t\t\t}, 100);\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\tx-on:resize.window=\"recalculateWidth()\"\n\t\t\t\t\t\t\t\t\tx-on:blur=\"$nextTick(() => calculateResults())\"\n\t\t\t\t\t\t\t\t\tx-on:input=\"validateWord(event)\"\n\t\t\t\t\t\t\t\t\tx-on:focus=\"$el.innerText = ''; wordIsCorrect = false;\"\n\t\t\t\t\t\t\t\t>____</span>\n\t\t\t\t\t\t\t</div> <div class=\"text-[inherit] cursor-default align-bottom inline-flex whitespace-nowrap rounded-md focus:outline-2 focus:outline-blue-400\">\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tid=\"firstHiddenWordInput\"\n\t\t\t\t\t\t\t\t\tcontenteditable=\"plaintext-only\"\n\t\t\t\t\t\t\t\t\tx-data=\"{\n\t\t\t\t\t\t\t\t\t\tindex: 10,\n\t\t\t\t\t\t\t\t\t\tcorrectWord: 'in',\n\t\t\t\t\t\t\t\t\t\tshowWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tshowWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget numOfWordsToGuess() {\n\t\t\t\t\t\t\t\t\t\t\tconst words = document.querySelectorAll('[contenteditable]');\n\t\t\t\t\t\t\t\t\t\t\treturn words.length;\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tcalculateResults() {\n                      // Get where data-solved exists\n\t\t\t\t\t\t\t\t\t\t\tconst words = Array.from(document.querySelectorAll('[data-solved]'));\n                      const weHaveAWinner = words.length === this.numOfWordsToGuess;\n\t\t\t\t\t\t\t\t\t\t\tif (weHaveAWinner) {\n\t\t\t\t\t\t\t\t\t\t\t\tconst duration = 2 * 1000;\n\t\t\t\t\t\t\t\t\t\t\t\tconst end = Date.now() + duration;\n\n\t\t\t\t\t\t\t\t\t\t\t\t(function frame() {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// launch a few confetti from the left edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 60,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 0 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// and launch a few from the right edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 120,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 1 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// keep going until we are out of time\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (Date.now() < end) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequestAnimationFrame(frame);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}());\n\n                        resetScriptureGuessInputs();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget hiddenWordElsAsArray() {\n\t\t\t\t\t\t\t\t\t\t\tconst nextWords = document.querySelectorAll('[data-index]');\n\t\t\t\t\t\t\t\t\t\t\treturn Array.from(nextWords);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgetHiddenWordFromIndex(index) {\n\t\t\t\t\t\t\t\t\t\t\treturn this.hiddenWordElsAsArray.find((word) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn word.getAttribute('data-index') === index.toString();\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgoToNextWord() {\n\t\t\t\t\t\t\t\t\t\t\t// Find the next word if it exists.\n\t\t\t\t\t\t\t\t\t\t\tif (this.index < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordIndex = this.index + 1;\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordEl;\n\n\t\t\t\t\t\t\t\t\t\t\t\twhile (!nextWordEl && nextWordIndex < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl = this.getHiddenWordFromIndex(nextWordIndex);\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordIndex += 1;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\tif (nextWordEl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.blur();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\twordIsCorrect: false,\n\t\t\t\t\t\t\t\t\t\tvalidateWord(event) {\n\t\t\t\t\t\t\t\t\t\t\t// Allow user to press spacebar without it affecting anything.\n\t\t\t\t\t\t\t\t\t\t\tif (event.data === ' ') {\n\t\t\t\t\t\t\t\t\t\t\t\t// Remove the last character from $el.innerText\n\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = $el.innerText.slice(0, -1);\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.length >= this.correctWord.length) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t// Check if the word is correct\n\t\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.toLowerCase() === this.correctWord.toLowerCase()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// If the word is correct, then make the outline green\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = true;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.goToNextWord();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Incorrect word. Fix by resetting it.\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\treturn Boolean($el.innerText === this.correctWord);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t// The input must be a max and min width, so that it doesn't\n\t\t\t\t\t\t\t\t\t\t// grow or shrink. It must maintain its original width.\t\n\t\t\t\t\t\t\t\t\t\trecalculateWidth() {\n\t\t\t\t\t\t\t\t\t\t\t$el.style.maxWidth = $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.minWidth =  $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.width = '100%';\n\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t\tautocapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\t\tx-bind:data-solved=\"wordIsCorrect ? true : false\"\n\t\t\t\t\t\t\t\t\tdata-index=\"10\"\n\t\t\t\t\t\t\t\t\tdata-underscores=\"__\"\n\t\t\t\t\t\t\t\t\tclass=\"focus-visible:outline-1 cursor-text self-baseline mask-underscores opacity-60 outline-0 rounded-sm inline-flex text-blue-700 dark:text-gray-300\"\n\t\t\t\t\t\t\t\t\tx-init=\"\n\t\t\t\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\t\t\t\trecalculateWidth();\n\t\t\t\t\t\t\t\t\t\t}, 100);\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\tx-on:resize.window=\"recalculateWidth()\"\n\t\t\t\t\t\t\t\t\tx-on:blur=\"$nextTick(() => calculateResults())\"\n\t\t\t\t\t\t\t\t\tx-on:input=\"validateWord(event)\"\n\t\t\t\t\t\t\t\t\tx-on:focus=\"$el.innerText = ''; wordIsCorrect = false;\"\n\t\t\t\t\t\t\t\t>__</span>\n\t\t\t\t\t\t\t</div> <div class=\"text-[inherit] cursor-default align-bottom inline-flex whitespace-nowrap rounded-md focus:outline-2 focus:outline-blue-400\">\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tid=\"firstHiddenWordInput\"\n\t\t\t\t\t\t\t\t\tcontenteditable=\"plaintext-only\"\n\t\t\t\t\t\t\t\t\tx-data=\"{\n\t\t\t\t\t\t\t\t\t\tindex: 11,\n\t\t\t\t\t\t\t\t\t\tcorrectWord: 'your',\n\t\t\t\t\t\t\t\t\t\tshowWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tshowWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.add('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsCorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-green-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\thideWordIsIncorrect() {\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('focus:outline');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-red-400');\n\t\t\t\t\t\t\t\t\t\t\t$el.classList.remove('outline-2');\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget numOfWordsToGuess() {\n\t\t\t\t\t\t\t\t\t\t\tconst words = document.querySelectorAll('[contenteditable]');\n\t\t\t\t\t\t\t\t\t\t\treturn words.length;\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tcalculateResults() {\n                      // Get where data-solved exists\n\t\t\t\t\t\t\t\t\t\t\tconst words = Array.from(document.querySelectorAll('[data-solved]'));\n                      const weHaveAWinner = words.length === this.numOfWordsToGuess;\n\t\t\t\t\t\t\t\t\t\t\tif (weHaveAWinner) {\n\t\t\t\t\t\t\t\t\t\t\t\tconst duration = 2 * 1000;\n\t\t\t\t\t\t\t\t\t\t\t\tconst end = Date.now() + duration;\n\n\t\t\t\t\t\t\t\t\t\t\t\t(function frame() {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// launch a few confetti from the left edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 60,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 0 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// and launch a few from the right edge\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfetti({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparticleCount: 5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tangle: 120,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tspread: 55,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\torigin: { x: 1 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t// keep going until we are out of time\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (Date.now() < end) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequestAnimationFrame(frame);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}());\n\n                        resetScriptureGuessInputs();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tget hiddenWordElsAsArray() {\n\t\t\t\t\t\t\t\t\t\t\tconst nextWords = document.querySelectorAll('[data-index]');\n\t\t\t\t\t\t\t\t\t\t\treturn Array.from(nextWords);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgetHiddenWordFromIndex(index) {\n\t\t\t\t\t\t\t\t\t\t\treturn this.hiddenWordElsAsArray.find((word) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn word.getAttribute('data-index') === index.toString();\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tgoToNextWord() {\n\t\t\t\t\t\t\t\t\t\t\t// Find the next word if it exists.\n\t\t\t\t\t\t\t\t\t\t\tif (this.index < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordIndex = this.index + 1;\n\t\t\t\t\t\t\t\t\t\t\t\tlet nextWordEl;\n\n\t\t\t\t\t\t\t\t\t\t\t\twhile (!nextWordEl && nextWordIndex < 24) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl = this.getHiddenWordFromIndex(nextWordIndex);\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordIndex += 1;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\tif (nextWordEl) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextWordEl.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.blur();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\twordIsCorrect: false,\n\t\t\t\t\t\t\t\t\t\tvalidateWord(event) {\n\t\t\t\t\t\t\t\t\t\t\t// Allow user to press spacebar without it affecting anything.\n\t\t\t\t\t\t\t\t\t\t\tif (event.data === ' ') {\n\t\t\t\t\t\t\t\t\t\t\t\t// Remove the last character from $el.innerText\n\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = $el.innerText.slice(0, -1);\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.length >= this.correctWord.length) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t// Check if the word is correct\n\t\t\t\t\t\t\t\t\t\t\t\tif ($el.innerText.toLowerCase() === this.correctWord.toLowerCase()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// If the word is correct, then make the outline green\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = true;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.goToNextWord();\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Incorrect word. Fix by resetting it.\n\t\t\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.showWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.wordIsCorrect = false;\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsCorrect();\n\t\t\t\t\t\t\t\t\t\t\t\tthis.hideWordIsIncorrect();\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\treturn Boolean($el.innerText === this.correctWord);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t// The input must be a max and min width, so that it doesn't\n\t\t\t\t\t\t\t\t\t\t// grow or shrink. It must maintain its original width.\t\n\t\t\t\t\t\t\t\t\t\trecalculateWidth() {\n\t\t\t\t\t\t\t\t\t\t\t$el.style.maxWidth = $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.minWidth =  $el.offsetWidth + 'px';\n\t\t\t\t\t\t\t\t\t\t\t$el.style.width = '100%';\n\t\t\t\t\t\t\t\t\t\t\t$el.innerText = '';\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t\tautocapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\t\tx-bind:data-solved=\"wordIsCorrect ? true : false\"\n\t\t\t\t\t\t\t\t\tdata-index=\"11\"\n\t\t\t\t\t\t\t\t\tdata-underscores=\"____\"\n\t\t\t\t\t\t\t\t\tclass=\"focus-visible:outline-1 cursor-text self-baseline mask-underscores opacity-60 outline-0 rounded-sm inline-flex text-blue-700 dark:text-gray-300\"\n\t\t\t\t\t\t\t\t\tx-init=\"\n\t\t\t\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\t\t\t\trecalculateWidth();\n\t\t\t\t\t\t\t\t\t\t}, 100);\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\tx-on:resize.window=\"recalculateWidth()\"\n\t\t\t\t\t\t\t\t\tx-on:blur=\"$nextTick(() => calculateResults())\"\n\t\t\t\t\t\t\t\t\tx-on:input=\"validateWord(event)\"\n\t\t\t\t\t\t\t\t\tx-on:focus=\"$el.innerText = ''; wordIsCorrect = false;\"\n\t\t\t\t\t\t\t\t>____</span>\n\t\t\t\t\t\t\t</div> truth; give me an undivided heart, that I may fear your name."
}