I am attempting to build a basic Vue 3 app with composition API that enables the user to guess an audible musical note by selecting buttons displaying 4 randomly shuffled musical notes from a selection of 7 notes (A,B,C,D,E,F,G). The first part of the setup function, under // Handle Audio passes 7 musical notes (imported as mp3 clips in assets) into an array called audioArray. The notes in audioArray are then shuffled in shuffleAudio, then passed to audio.value. The audio is played when the user clicks “click for audio”, and reshuffled with the onBeforeMount life cycle hook. Meanwhile, under // handleLetters, each of the four buttons are configured to display a letter corresponding to a musical note, which are shuffled when shuffleLetter is called by onBeforeMount.
I am now trying to get the buttons to trigger “correct” and “incorrect” messages when the user selects either the correct or incorrect note. To do this, I tried setting up the buttons with click events (ex. handleSelectOne, handleSelectTwo…etc.). For example, in handleSelectOne, if the button note displayed is “A” and the musical note playing is noteA, then the message displayed is ‘CORRECT’ when the user taps the “A” button, else ‘INCORRECT’. However, I tried putting a breakpoint on handleSelectOne, but the event isn’t triggered upon selecting A when noteA is played. Meanwhile, I am not sure if my conditional is setup correctly. How can I set up the logic in handleSelectOne to respond correctly if the button letter is A and corresponds to the note being played?
Here is my code so far:
template
<template>
<div div class="flex justify-center">
<button @click="handleAudio">Click for Audio</button>
</div>
<div class="flex justify-center">
<button @click="handleSelectOne">{{ letters.letterDisplayOne }}</button>
<button @click="handleSelectTwo">{{ letters.letterDisplayTwo }}</button>
<button @click="handleSelectThree">{{ letters.letterDisplayThree }}</button>
<button @click="handleSelectFour">{{ letters.letterDisplayFour }}</button>
<button @click="handleSelectNone">None</button>
</div>
<div>
<h1>{{ message }}</h1>
</div>
</template>
script
<script>
import { ref, reactive, onBeforeMount } from 'vue';
const noteA = require("../assets/note-a.mp3")
const noteB = require("../assets/note-b.mp3")
const noteC = require("../assets/note-c.mp3")
const noteD = require("../assets/note-d.mp3")
const noteE = require("../assets/note-e.mp3")
const noteF = require("../assets/note-f.mp3")
const noteG = require("../assets/note-g.mp3")
export default {
name: 'Button',
components: {},
setup() {
// Handle Audio
const audioArray = ref([noteA, noteB, noteC, noteD, noteE, noteF, noteG])
const audio = ref(audioArray.value)
const shuffleAudio = () => {
audioArray.value = audioArray.value.sort(() => 0.5 - Math.random())
}
const handleAudio = () => {
audio.value = new Audio(audioArray.value[0]);
audio.value.play()
console.log(audioArray.value)
}
// Handle Letters
const letters = reactive({
letterDisplayOne: '',
letterDisplayTwo: '',
letterDisplayThree: '',
letterDisplayFour: ''
})
const letterArray = ref(['A','B','C','D','E','F','G'])
const shuffleLetter = () => {
letterArray.value = letterArray.value.sort(() => 0.5 - Math.random())
}
const handleLetterArray = () => {
letters.letterDisplayOne = letterArray.value[0]
letters.letterDisplayTwo = letterArray.value[1]
letters.letterDisplayThree = letterArray.value[2]
letters.letterDisplayFour = letterArray.value[3]
}
// Handle message
const message = ref('')
const handleSelectOne = () => {
if (letters.letterDisplayOne === 'A' && audio.value === audioArray.value[noteA]) {
message.value = 'CORRECT!!!!'
} else {
message.value = 'INCORRECT!!!!'
}
}
const handleSelectTwo = () => {
// functionality for handleSelectTwo
}
const handleSelectThree = () => {
// functionality for handleSelectThree
}
const handleSelectFour = () => {
// functionality for handleSelectFour
}
const handleSelectNone = () => {
// functionality for handleSelectNone
}
onBeforeMount(() => {
shuffleAudio()
shuffleLetter()
handleLetterArray()
})
return {
audioArray,
shuffleAudio,
audio,
handleAudio,
letters,
letterArray,
shuffleLetter,
handleLetterArray,
message,
handleSelectOne,
handleSelectTwo,
handleSelectThree,
handleSelectFour,
handleSelectNone
}
}
}
