https://www.stringkick.com/wp-content/themes/sk-genesis/js/sk-vue/KeyFinder.ce.BKrDnS9w.js

1import{Y as e}from"./YouTubeEmbed.CBenVZgO.js";import{a as t,o as a,c as r,n as i,F as n,r as s,d as o,b as c,t as d,e as l,m,f as p,g as h,w as u,v as g,T as f}from"./sk-vue.BcAGqpPP.js";import"./ToggleSwitch.BlurKK5s.js";const b={class:"answer-button__wrapper"},w=["value"],x={key:1,class:"answer-option-double-button-grid"},v={class:"note-options-wrapper"},y=["value"],A={class:"type-options-wrapper"},k=["value"];const D={id:"key-finder-app"},M={class:"quiz-wrapper"},z={class:"key__wrapper"},C={class:"key__root"},I={key:0,class:"key__accidental"},O={key:1,class:"key__quality"},q={class:"result-indicator"},j={class:"result-indicator--text"},_={class:"hint-wrapper"},S={class:"hint-text"};const K=t({name:"key-finder-app",components:{YouTubeEmbed:e,AnswerButtons:t({name:"AnswerButtons",components:{},props:["chordLines","answerOptions"],methods:{clickAnimation(e){let t=e.target;t.classList.add("click-background"),setTimeout(()=>{t.classList.remove("click-background")},100)},checkNumberOfButtons(e){if(e.length>=12)return"answer__option-button-grid--four-column"}}},[["render",function(e,t,l,m,p,h){return a(),r("div",b,[l.answerOptions.constructor===Array?(a(),r("div",{key:0,class:i(["answer-option-single-button-grid",h.checkNumberOfButtons(l.answerOptions)])},[(a(!0),r(n,null,s(l.answerOptions,i=>(a(),r("button",{class:"answer-option-button",onClick:t[0]||(t[0]=t=>[e.$emit("optionClicked",t),h.clickAnimation(t)]),value:i,name:"answerOption"},d(i),9,w))),256))],2)):o("",!0),l.answerOptions.constructor===Object?(a(),r("div",x,[c("div",v,[(a(!0),r(n,null,s(l.answerOptions.notes,i=>(a(),r("button",{class:"answer-option-button answer-option-button--note",onClick:t[1]||(t[1]=t=>[e.$emit("optionClicked",t),h.clickAnimation(t)]),value:i,name:"noteOption"},d(i),9,y))),256))]),c("div",A,[(a(!0),r(n,null,s(l.answerOptions.types,i=>(a(),r("button",{class:"answer-option-button",onClick:t[2]||(t[2]=t=>[e.$emit("optionClicked",t),h.clickAnimation(t)]),value:i.short,name:"typeOption"},d(i.name),9,k))),256))])])):o("",!0),c("button",{class:"function-button",onClick:t[3]||(t[3]=t=>[e.$emit("answerClicked"),h.clickAnimation(t)])},"Check Answer")])}],["styles",[".answer-button__wrapper[data-v-7e2fa9b8]{margin-top:1rem;margin-bottom:.5rem}.answer-option-single-button-grid[data-v-7e2fa9b8]{max-width:400px;display:flex;flex-wrap:wrap;margin:0 auto;justify-content:center}.answer-option-single-button-grid--four-column[data-v-7e2fa9b8]{max-width:440px}.answer-option-double-button-grid[data-v-7e2fa9b8]{max-width:400px;display:flex;flex-wrap:wrap;flex-direction:row;margin:0 auto;justify-content:center}.type-options-wrapper[data-v-7e2fa9b8]{margin-top:.5rem}.answer-option-button[data-v-7e2fa9b8]{font-family:Montserrat,Avenir,Helvetica,Arial,sans-serif;font-weight:600;font-size:.8rem;border-radius:4px;min-height:42px;min-width:90px;margin:.25rem;border:black 0px solid;cursor:pointer;box-shadow:0 4px 6px #00000026,0 2px 4px #0000001f;background:#ecf0f1;color:#222;padding:10px;transition:all 10ms linear;touch-action:manipulation}@media(min-width:400px){.answer-option-button[data-v-7e2fa9b8]{min-width:100px}}@media(hover:hover){.answer-option-button[data-v-7e2fa9b8]:hover{background:#2c3e50;color:#ecf0f1}}.answer-option-button--note[data-v-7e2fa9b8]{min-width:66px}@media(min-width:350px){.answer-option-button--note[data-v-7e2fa9b8]{min-width:70px}}@media(min-width:400px){.answer-option-button--note[data-v-7e2fa9b8]{min-width:75px}}.function-button[data-v-7e2fa9b8]{font-family:Montserrat,Avenir,Helvetica,Arial,sans-serif;font-weight:700;font-size:.65rem;border-radius:4px;min-height:44px;cursor:pointer;min-width:145px;border:#4b4c9e 0px solid;box-shadow:0 4px 6px #0006,0 2px 4px #0000001f;box-shadow:0 4px 6px #00000040,0 2px 4px #0000001f;background:#e8ecee;color:#222;text-transform:uppercase;letter-spacing:-.02em;margin:.75rem .2rem;padding:10px 0}@media(min-width:340px){.function-button[data-v-7e2fa9b8]{font-size:.65rem;padding:10px 5px;min-width:150px;margin:.75rem .25rem}}@media(min-width:375px){.function-button[data-v-7e2fa9b8]{font-size:.7rem;padding:10px 5px;min-width:160px;margin:.75rem .5rem}}@media(min-width:400px){.function-button[data-v-7e2fa9b8]{padding:10px 5px;min-width:160px;margin:.75rem .5rem}}@media(hover:hover){.function-button[data-v-7e2fa9b8]:hover{background:#2c3e50;color:#ecf0f1}}.click-background[data-v-7e2fa9b8]{background:#2c3e50!important;color:#ecf0f1!important;box-shadow:0 4px 6px #0000000d,0 2px 4px #00000005!important;transform:scale(.98)!important}"]],["__scopeId","data-v-7e2fa9b8"]])},props:["prefix"],data:()=>({showResultIndicatorState:!1,answerIsCorrect:!1,answerAlmostCorrect:!1,completedMessage:"Well done! That is the right key.",displayVideo:!0,showSettings:!1,loopProgress:0,repeats:[],correctMessages:["Nailed it!","Sweet!","Awesome!","You Got it!","That's Right!","Bravo!","Perfect!","Exemplary!","Respect!","Superb!","That's it!","Nice","Got it!","Great Job!","Magnificent!","Smashing!","Spectacular!","Right on!","Marvellous!","Dazzling!","Great!","Fabulous","Top Notch!","Correct!","Bewdy!","Respect!","Brilliant!","Exactly","Excellent!","Splendid!","Good Going!","Sublime!","Groovy!","Boom!"],closeMessages:["You are close!","Getting there!","Almost!","Not bad!"],incorrectMessages:["Try Again!","Not Yet!","Guess Again!","Nope!"],longerIncorrectMessages:["That's not it. Keep trying!","N

1ot quite! Keep going!","Nope! Try to listen to each note carefully and compare it to the song!"],chosenCorrectMessage:"",chosenIncorrectMessage:"",resultIndicatorText:"",hintMessage:"",answerOptions:{notes:["A","A#","B","C","C#","D","D#","E","F","F#","G","G#"],types:[{name:"major",short:""},{name:"minor",short:"m"}]},quizData:{correctKey:"Bb",userAnswer:"",relativeKey:"",userAnswerObject:{}},videoData:[{videoID:"OJ62RzJkYUo",videoStart:3.8,videoEnd:71.8},{videoID:"Wz54fO2MhFg",videoStart:3.6,videoEnd:170.3},{videoID:"e-fA-gBCkj0",videoStart:4.01,videoEnd:84},{videoID:"iOmnGzAKLvg",videoStart:2,videoEnd:57.88},{videoID:"oDuif301F-8",videoStart:9.1,videoEnd:43.9},{videoID:"vglxk3JbHnQ",videoStart:13.21,videoEnd:37.4},{videoID:"1lWJXDG2i0A",videoStart:13.21,videoEnd:37.4}],ytPlayerVars:{start:0,showinfo:0,autohide:0,controls:1,modestbranding:1,rel:0,loop:1},skPlayerVars:{loopMode:!0,loopToggle:!1,speedControls:!1,settingsCog:!0,keyControlsActive:!1,addIframeOnMouseover:!1,addIframeOnLoad:!1},songData:{timeSignature:"4/4",playthroughs:1,repeats:[],speedAdjustment:-.6}}),methods:{handleChildProgress(e){this.loopProgress=e},handleOptionClicked(e){"noteOption"===e.target.name&&this.resetAnswer(),this.fillInAnswer(e)},fillInAnswer(e){"noteOption"===e.target.name?this.quizData.userAnswer=e.target.value:"m"===e.target.value?this.quizData.userAnswer+=e.target.value:""===e.target.value&&(this.quizData.userAnswer=this.quizData.userAnswer.replace("m","")),this.quizData.userAnswerObject=this.createKeyElements(this.quizData.userAnswer)},checkAnswer(){if(this.quizData.userAnswer===this.quizData.correctKey)this.chosenCorrectMessage=this.correctMessages[Math.floor(Math.random()*this.correctMessages.length)],this.chosenIncorrectMessage="",this.resultIndicatorText=this.chosenCorrectMessage,this.answerIsCorrect=!0;else{let e=this.quizData.adjacentKeys;for(let t=0;t<e.length;t++)this.quizData.userAnswer===e[t].name&&(this.answerIsCorrect=!1,this.answerAlmostCorrect=!0,this.chosenIncorrectMessage=this.closeMessages[Math.floor(Math.random()*this.closeMessages.length)]);this.answerAlmostCorrect||(this.answerIsCorrect=!1,this.chosenIncorrectMessage=this.incorrectMessages[Math.floor(Math.random()*this.incorrectMessages.length)]),this.chosenCorrectMessage="",this.resultIndicatorText=this.chosenIncorrectMessage,this.formulateHint()}this.showResult(800)},resetAnswer(){this.quizData.userAnswer="",this.quizData.userAnswerObject={},this.answerIsCorrect=!1,this.answerAlmostCorrect=!1,this.showResultIndicatorState=!1},showResult(e){this.chooseMessage(),this.showResultIndicatorState=!0,this.answerIsCorrect&&(e=1400),setTimeout(()=>{},e)},chooseMessage(){let e="";!0===this.answerIsCorrect?(e=Math.floor(Math.random()*this.correctMessages.length),this.chosenCorrectMessage=this.correctMessages[e]):(e=Math.floor(Math.random()*this.incorrectMessages.length),this.chosenIncorrectMessage=this.incorrectMessages[e])},determineFlatorSharpKey(){let e=this.quizData.correctKey;["G","D","A","E","B","F#","C#","Em","Bm","F#m","C#m","G#m","D#m","Am"].includes(e)?this.quizData.sharpOrFlat="sharp":(this.quizData.sharpOrFlat="flat",this.adjustAnswerbuttonsToFlat())},adjustAnswerbuttonsToFlat(){let e=this.answerOptions,t=["C","C#","D","D#","E","F","F#","G","G#","A","A#","B"],a=["C","Db","D","Eb","E","F","Gb","G","Ab","A","Bb","B"];for(let r=0;r<e.notes.length;r++){let i=t.indexOf(e.notes[r]);e.notes[r]=a[i]}this.answerOptions=e},determineSemiCorrectAnswers(){let e=["C","C#","D","D#","E","F","F#","G","G#","A","A#","B"];"flat"===this.quizData.sharpOrFlat&&(e=["C","Db","D","Eb","E","F","Gb","G","Ab","A","Bb","B"]);let t=this.quizData.correctKey.replace("m",""),a=e.indexOf(t);this.determineRelativeKey(a,e),this.determineAdjacentKeys(a,e)},determineRelativeKey(e,t){let a=null;if(this.quizData.correctKey.includes("m")){if(this.quizData.correctKey.includes("m")){a=e+3,a>11&&(a-=12);let r=t[a];this.quizData.relativeKey=r}}else{a=e-3,a<0&&(a=12+a);let r=t[a]+"m";this.quizData.relativeKey=r}},determineAdjacentKeys(e,t){if(t=t.concat(t),this.quizData.correctKey.includes("m")){if(this.quizData.correctKey.includes("m")){let a=[{romanNumeral:"i",index:e,name:t[e]+"m",mode:"aeolian",pentatonic:"minor"},{romanNumeral:"ii°",index:e+2,name:t[e+2]+"dim",mode:"locrian",pentatonic:"minor"},{romanNumeral:"III",index:e+3,name:t[e+3],mode:"phrygian",pentatonic:"major"},{romanNumeral:"iv",index:e+5,name:t[e+5]+"m",mode:"dorian",pentatonic:"minor"},{romanNumeral:"v",index:e+7,name:t[e+7]+"m",mode:"aeolian",pentatonic:"minor"},{romanNumeral:"VI",index:e+8,name:t[e+8],mode:"locrian",pentatonic:"major"},{romanNumeral:"VII",index:e+10,name:t[e+10],mode:"phrygian",pentatonic:"major"}];this.quizData.adjacentKeys=a}}else{let a=[{romanNumeral:"I",index:e,name:t[e],mode:"ionian",pentatonic:"major"},{romanNumeral:"ii",index:e+2,name:t[e+2]+"m",mode:"dorian",pentatonic:"minor"},{romanNumeral:"iii",index:e+4,name:t[e+4]+"m",mode:"phrygian",pentatonic:"minor"},{romanNumeral:"IV",index:e+5,name:t[e+5],mode:"lydian",pentatonic:"major"},{romanNumeral:"V",index:e+7,name:t[e+7],mode:"mixolydian",pentatonic:"major"},{romanNumeral:"vi",index:e+9,name:t[e+9]+"m",mode:"aeolian",pentatonic:"minor"},{romanNumeral:"vii",index:e+11,name:t[e+11]+"dim",mode:"locrian",pentatonic:"minor"}];this.quizData.adjacentKeys=a}},createKeyElements(e){let t={};

1return t.root=e.charAt(0),"b"===e.charAt(1)?t.accidental="♭":"#"===e.charAt(1)?t.accidental="♯":t.accidental=null,t.accidental?"m"===e.charAt(2)&&"a"!==e.charAt(3)?t.quality="m":t.quality=null:"m"===e.charAt(1)&&"a"!==e.charAt(2)?t.quality="m":t.quality=null,t},formulateHint(){this.answerIsCorrect&&(this.hintMessage=this.completedMessage);let e=this.quizData.adjacentKeys;for(let t=0;t<e.length;t++){if(e[t].name,this.quizData.userAnswer===e[t].name){let a=e[t].name.replace("m","");this.hintMessage=e[t].name+" shares many notes with the correct key. In fact, playing "+a+" "+e[t].pentatonic+" pentatonic sounds fine over this song. Listen closely to which note sounds the most at rest.";break}this.hintMessage=this.longerIncorrectMessages[Math.floor(Math.random()*this.longerIncorrectMessages.length)]}}},created:function(){var e=(this.prefix?this.prefix:"key_finder")+"_externalData";if(window[e])var t=window[e];for(var a in t)t.hasOwnProperty(a)&&(this[a]=t[a])},mounted:function(){this.determineFlatorSharpKey(),this.determineSemiCorrectAnswers()}},[["render",function(e,t,n,s,b,w){const x=l("YouTubeEmbed"),v=l("AnswerButtons");return a(),r("div",D,[b.displayVideo?(a(),m(x,{key:0,videoData:b.videoData,ytPlayerVars:b.ytPlayerVars,skPlayerVars:b.skPlayerVars,showSettings:b.showSettings,onToggleSettings:t[0]||(t[0]=t=>e.toggleSettings()),parentProgress:b.loopProgress,onUpdateProgress:w.handleChildProgress},null,8,["videoData","ytPlayerVars","skPlayerVars","showSettings","parentProgress","onUpdateProgress"])):o("",!0),c("div",M,[c("div",{class:i(["user-answer-display",[{"is-correct":this.answerIsCorrect,"is-incorrect":!this.answerIsCorrect}]])},[c("div",z,[c("div",C,d(b.quizData.userAnswerObject.root),1),null!==b.quizData.userAnswerObject.accidental?(a(),r("div",I,d(b.quizData.userAnswerObject.accidental),1)):o("",!0),"m"===b.quizData.userAnswerObject.quality?(a(),r("div",O,d(b.quizData.userAnswerObject.quality),1)):o("",!0)])],2),p(f,{name:"fade"},{default:h(()=>[c("div",q,[u(c("div",{class:i(["result-indicator--inner",[{"is-correct":this.answerIsCorrect,"is-almost-correct":this.answerAlmostCorrect,"is-incorrect":!this.answerIsCorrect}]])},[c("div",j,d(this.resultIndicatorText),1)],2),[[g,b.showResultIndicatorState]])])]),_:1}),c("div",_,[c("div",S,[c("span",null,d(b.hintMessage),1)])]),u(p(v,{answerOptions:b.answerOptions,onAnswerClicked:t[1]||(t[1]=e=>w.checkAnswer()),onOptionClicked:t[2]||(t[2]=e=>w.handleOptionClicked(e))},null,8,["answerOptions"]),[[g,!b.answerIsCorrect]]),u(c("div",{class:"song-complete-message"},d(b.completedMessage),513),[[g,b.answerIsCorrect]])])])}],["styles",["[data-v-0785b1ca]:root{font-size:20px}html[data-v-0785b1ca]{box-sizing:border-box;font-family:Montserrat,sans-serif}[data-v-0785b1ca],[data-v-0785b1ca]:before,[data-v-0785b1ca]:after{box-sizing:inherit}body[data-v-0785b1ca]{margin:0}#key-finder-app[data-v-0785b1ca]{font-family:Montserrat,Avenir,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:500;text-align:center;font-size:16px;color:#222;position:relative;line-height:1.5;letter-spacing:-.02em;margin:auto;max-width:800px}.wrapper[data-v-0785b1ca]{display:flex;margin:auto;max-width:800px;flex-direction:column}.fade-enter[data-v-0785b1ca],.fade-leave-to[data-v-0785b1ca]{opacity:0}.fade-enter-active[data-v-0785b1ca],.fade-leave-active[data-v-0785b1ca]{transition:all .3s}.user-answer-display[data-v-0785b1ca]{font-size:2.4rem;margin:1rem 0;font-weight:600;color:#222;letter-spacing:-.05em;text-align:center;padding:.5rem;border:none;border-radius:4px;background:#f8f9fa;box-shadow:0 4px 6px #00000026,0 2px 4px #0000001f;transition:all 10ms linear;max-width:240px;min-height:94px;margin:0 auto}.hint-wrapper[data-v-0785b1ca]{margin:1rem 0;color:#222;letter-spacing:.05em;text-align:center;padding:1rem;border:none;transition:all 10ms linear;max-width:350px;margin:0 auto;text-align:left}@media(min-width:400px){.hint-wrapper[data-v-0785b1ca]{max-width:370px}}.hint-message--icon[data-v-0785b1ca],.hint-message--text[data-v-0785b1ca]{display:flex}.hint-message--text span[data-v-0785b1ca]{margin:auto}.hint-message--incorrect .hint-message--icon[data-v-0785b1ca]{background:#ffa

1726}.hint-message--incorrect .hint-message--text[data-v-0785b1ca]{background:#fff3e0;color:#181818}.hint-message--correct .hint-message--icon[data-v-0785b1ca]{color:#004d40;background:#409a91}.hint-message--correct .hint-message--text[data-v-0785b1ca]{color:#004d40;background:#e8f3f2}.hint-message--icon[data-v-0785b1ca]{display:flex;padding-bottom:6px}.result-indicator[data-v-0785b1ca]{font-family:Montserrat,Avenir,Helvetica,Arial,sans-serif;font-size:18px;font-weight:600;margin:1rem auto 0;display:flex;justify-content:center;min-height:40px}.result-indicator--inner[data-v-0785b1ca]{width:10rem;height:2rem;display:flex;justify-content:center;align-items:center;border-radius:25px}.result-indicator--inner.is-correct[data-v-0785b1ca]{background:#e8f3f2;border-color:#409a91;color:#004d40}.result-indicator--inner.is-incorrect[data-v-0785b1ca]{background:#ffccbc;color:#621c06}.result-indicator--inner.is-almost-correct[data-v-0785b1ca]{background:#fff3e0;border-color:#ffa726;color:#181818;color:#621c06}.result-message-wrapper[data-v-0785b1ca]{width:100%;height:100%;z-index:5;position:absolute;background:#ffffffb3}.result-message[data-v-0785b1ca]{font-family:Montserrat,Avenir,Helvetica,Arial,sans-serif;font-size:24px;font-weight:600;width:300px;height:80px;margin:0 auto;border-radius:4px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-style:solid;border-width:0px;box-shadow:0 15px 25px #00000026,0 5px 10px #00000026;z-index:10;display:grid;grid-template-columns:40px 265px;overflow:hidden}.result-message--icon[data-v-0785b1ca],.result-message--text[data-v-0785b1ca]{display:flex}.result-message--text span[data-v-0785b1ca]{margin:auto}.result-message--incorrect .result-message--icon[data-v-0785b1ca]{background:#ffa726}.result-message--incorrect .result-message--text[data-v-0785b1ca]{background:#fff3e0;color:#181818}.result-message--correct .result-message--icon[data-v-0785b1ca]{color:#004d40;background:#409a91}.result-message--correct .result-message--text[data-v-0785b1ca]{color:#004d40;background:#e8f3f2}.result-message--icon[data-v-0785b1ca]{display:flex;padding-bottom:6px}.check[data-v-0785b1ca]{margin:auto;display:inline-block;transform:rotate(45deg);height:24px;width:13px;border-bottom:5px solid white;border-right:5px solid white}.exclamation[data-v-0785b1ca]{margin:auto;color:#fff;font-size:40px;font-weight:700}.song-complete-message[data-v-0785b1ca]{margin-top:2rem;margin-bottom:3rem}.key__wrapper[data-v-0785b1ca]{position:relative;z-index:2;width:100%;height:100%;display:flex;font-size:2.4rem;justify-self:center;align-self:center;justify-content:center;font-family:montserrat;z-index:1;font-weight:600}.key__accidental[data-v-0785b1ca]{font-size:65%;margin-left:-1px;margin-top:2px}.key__accidental+div[data-v-0785b1ca]{margin-left:-2px}@media(min-width:500px){.key__accidental+div[data-v-0785b1ca]{margin-left:-1px}}.key__quality[data-v-0785b1ca]{font-size:65%;margin-top:18px;margin-left:-1px}"]],["__scopeId","data-v-0785b1ca"]]);export{K as default};