Attempt at fighting quiz game

So after reading another post where somebody asked how to make a drag and drop more interactive, (and probably due to a large amount of coffee) I came up with an idea to make a fighting quiz game. I used some assets from the internet to quickly put my idea together. I had some troubles with a few things which I list below.

The premise of how the game is going to work is you will have the user take control of one character and have him face an opponent. Everytime you get an answer correct, you strike your opponent and take away one of his stars. Everytime you get one wrong, he strikes and one of your stars gets taken away. At the end of the quiz (5 rounds in my demo) whoever has more stars wins.

https://visual-e-learning.com/Demos/Fighter/story.html

My challenges:

Problem 1 -

I decided at first to use animated gifs since I could easily find those on the street fighter characters and didn't have to animate any of the fighting or other movements. I even found a cool animated background. One of the problems I ran into was with the animated character gifs. I have sets of the characters on their own layers so when the user = correct, show layer = player correct - where the animated user character strikes his opponenet. The problem I ran into was that the animated gifs ran on their own timeline, not the layer timeline. So even if the layer was hidden, the animated gif would continue to play, and when the trigger showed that layer, it would appear mid animation most of the time. So the user would see the animation mid strike or near the end, and then it would loop to the beginning. Since the layer only displayed for 1 sec (the lenght of the animaiton) the user wouldn not see the correct animation from the beginning about 9/10 of the time.

My fix: I turned the gif animations into flash animations with a "stop" at the end. The flash animations would start from the beginning everytime the layer would show. Great.... or so I thought. The file looked fine when I ran it from my local drive, but when I viewed it from my dropbox. the flash files on the layers would take some time to load so thats why there is a "gap" in animation after the user answers the question. And they are not very large files. I would like to see if I actually hosted on a regular web server if it might respond server since dropbox was not meant to do this kind of stuff.

Problem - Background music. If you checked out the demo then you should be able to tell that everytime you advance to the next slide (question) then the background music restarts over and over.

No fix yet.

Problem - The star guage will appear full for a very brief moment after every slide. Thelayer is set up with triggers to "disable" them one by one once it checks the "health" of the player. I would like it to appear at the correct level without this quick flash but it is a minor problem. It still annoys me though.

Possible fix -  RIght now I have each star as its own shape with two states on it. "Off" and "on". So that is 10 total stars that has to be adjusted everytime the slide loads. I'm going to create one star guage for each side with 5 states in it (5 stars, 4 starts, 3 stars...) so that the layer only has to check against one shape. Maybe that'll work, or maybe not.

So where would something like this have a place in a course. I'm not sure I just did it for fun. You could place something like this in about proper hygiene where the user "battles" germs after getting armed with knowledge and information.  I'm going to make a few more attempts at trying to fix the above problems and then I'll post the source files.

Update:  Updated the link.