Help with click/tap event and randomly generated array

Hey everyone - I’m on the final push to get my app done and have some randomly generated multiple choice quizzes and everything is working except for audio.

An array is randomly generated when the page is loaded and it grabs 10 questions from the JSON and randomly arranges them.

The quiz data is stored in JSON format like this:

	"1": { 
		"Q1" : "Listen to the two numbers and select the sum of the numbers below:",
		"O1" : "40",
		"O2" : "50",
		"O3" : "20",
		"O4" : "400",
		"A"  : "40",
		"hasAudioClip": true,
		"AudioA1": "assets/aud/pq12a1.mp3"

I’ve been messing around for hours trying to get it to play AudioA1, AudioA2, etc. depending on which question is randomly selected (only some questions have audio).

The relevant HTML I wrote (incorrectly):

            <ion-item text-wrap no-lines>                
                <h3>{{ q1 }}</h3>
                <ion-icon name="play" item-right class="hidePlay" (click)="playAudioA1()" [ngClass]="{ 'show': q1HasAudio }"></ion-icon>

This code is wrong because it plays AudioA1 every time, regardless of which question is randomly placed in the q1 slot.


playAudioA1() {'pq12a1')

Is there an easy way to have a (click) event paired up with playing the correct audio file? I can post more of my HTML and typescript code but I was trying to keep it as short and sweet as possible to make it more likely that someone actually reads and helps.


Pass the property of the question variable you are using to loop:

playAudio(af:string): void {;

<ion-item *ngFor="let q of questions" (click)="playAudio(q.AudioA1)">
1 Like

Thank you so much for helping on this! I will experiment with your suggestion and make sure it works for me, but this is hugely helpful putting me on the right track.