In Control My Panic, there is a distraction picture part where a picture is displayed with text underneath, asking a question to the user. The picture and question are used to distract the user. I gathered a few different pictures so they would randomize for the user each time they went to use Control My Panic, as if they only saw the same photo every time, it would be less effective.
I find a nice tutorial on Dynamic Web Coding that did exactly what I was looking for. I had to create an array, then create a function and then call the function in the section of my HTML I wanted it to be displayed.
Creating array with the images
Calling the function in the HTML
I tried to add this to my script.js file, but it wouldn’t work. When I added the code into the head of my HTML file, it worked.. dunno why it wouldn’t work in my JS file.
I had the images randomizing, but I needed text to be displayed specific to the image that was randomized. After searching online, I found out that I had to add another array for the text and then get the values from that array.
New array and changed function
Now the images randomize and the matching text shows. I just need to figure out how to style the text!