Xcode – How to create an effect to highlight correct answer

Here’s what I would do:

Record the sound "Tap the number" and then the sounds for the numbers 0 through 9. Name the number sounds "0.mp3" through "9.mp3"

Create a storyboard with 4 buttons on it (like the picture you posted.)

Set up button IBOutlets buttonA – buttonD. Put those buttons into an array:

let buttonsArray = [buttonA, buttonB, buttonC, buttonD]

Fill an array with the numbers 0-9. Shuffle it. Remove 4 values put them into an array "buttonValues" (use the method removeLast().) The code to generate non-repeating values from 0-9 might look like this:

var randomNumbers =  [Int]() //Define an array to hold random Ints
var lastValueReturned: Int?

//Function to return a random Int. It won't return the same value twice
func randomNumber() -> Int {


    //Remove and return an item from the array
    var result: Int
    repeat {
        //If the array is empty, fill it with the shuffled numbers 0...9
        if randomNumbers.isEmpty {
            randomNumbers += Array(0...9).shuffled()
        }
        result = randomNumbers.removeLast()
    } while result == lastValueReturned
    lastValueReturned = result
    return result
}

Loop through your array of buttonValues and install the string for each number as the title of one of your buttons:

for index = 0…3 {
buttonsArray[index].setTitle("(buttonValues[index])", forSate: .normal)
}

Pick an index 0-3 to be the "correct" number.

let indexToPick = Int.random(in: 0...3)

Look up that value in buttonValues, and use it to pick a sound file to play:

let numberToPick = buttonValues[indexToPick]

let soundName = "(numberToPick).mp3"

Load and play the "tap the number" sound, and then Load and play the sound for the selected number (soundName).

When the user taps a button, have the IBAction method use the sender parameter that is passed to it, and look in the array of buttons, buttonsArray, to see which button index was tapped.

If it is the correct button, take the success action.

If the tapped button index is not indexToPick, do an animation that changes the background color of the button at indexToPick, or the button’s border width, or something, and then animates it back to normal. (Look at the UIView animate(duration:) family of methods for how to animate the button’s background color. Use the form that takes an options: parameter, and set the .autoreverse option.)

If you’re a newbie to iOS development, figuring out how to animate your correct answer button could be a challenge. I created a sample project that just animates one of 4 random buttons: https://github.com/DuncanMC/ButtonAnimation.git

The code for that project is as follows:

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var buttonA: UIButton!
    @IBOutlet weak var buttonB: UIButton!
    @IBOutlet weak var buttonC: UIButton!
    @IBOutlet weak var buttonD: UIButton!

    //Define an empty array to hold buttons.
    var buttonsArray = [UIButton]()

    override func viewDidLoad() {
        super.viewDidLoad()

        //Put our button outlets into an array so we can reference them by index.
        buttonsArray = [buttonA, buttonB, buttonC, buttonD]

        //Give our buttons a cornerRadius so they look rounded when we add a border and fill color
        for button in buttonsArray {
            button.layer.cornerRadius = 10
        }
    }

    @IBAction func handleAnimateButton(_ sender: UIButton) {
        sender.isEnabled = false

        //Pick a random button
        let button = buttonsArray.randomElement()!

        //Create an auto-reversing animation that fills the button with cyan, and draws a border around it.
        //(Showing the border won't fade in and out, but it doesn't really matter)
        UIView.animate(withDuration: 0.25,
                       delay: 0,
                       options: [.autoreverse, .curveEaseInOut],
                       animations: {
                        button.backgroundColor = .cyan
                        button.layer.borderWidth = 1.0
                       }, completion: {
                        success in
                        button.backgroundColor = .clear
                        sender.isEnabled = true
                        button.layer.borderWidth = 0
                       })
    }
}