How to Play Random Video

Hello,

I am a new user trying to figure out how to get my app to randomly select 1 of 100 videos to play. I have the videos uploaded on youtube.

For background/context: My app is a simulation of a spoken exam for ESL students (students of English as a Second Language). On the real exam, there are 100 questions, and the person giving the exam will choose ten of those questions at random. I have recorded each of those 100 questions on video (using different actors with different accents/races/genders/ages/etc.) and uploaded those videos on youtube.

I have figured out how to add video to my app. However, where I am running into a problem, is figuring out how to randomize which video plays. Ideally, I would like the users to click a button labeled “GO,” which will then randomly select 1 of those 100 videos to play. I would also like to repeat this 9 times (autoplay 9 other videos), until the user has been asked 10, unique, random questions from the 100 total that I have.

I have a work-around right now in which I have randomized the order of the questions manually, and uploaded them in random order, in ten groups of ten. The user can click on a group of ten (a practice test), and then click on each question individually to get each video to play. The problem with this work-around is that the HCI (human computer interface) seems overly complicated and messy. Because my users have limited English skills, I’d prefer that they push one button (with only the word “go”) than navigate through multiple practice tests with multiple links to videos.

I just started using bubble recently. I’ve gone through the tutorials, and tried searching the forums and youtube lessons for a solution, but haven’t found an answer that I could understand. I thought I might be able to add the video IDs as data, and do a search for that data, and then display the video as random, but I am really struggling to figure out how to work with data.

I appreciate any guidance anyone might have! I’m happy to clarify or give more information if needed. Thank you!

Hi @alina.learneslpittsb :slight_smile: This sounds like an awesome idea for a Bubble app! Here is a demo on how to play a random video:

Preview:

Editor:

Similar to what you probably have set up, in this example, there are two data types being used: Video and User

Video

Group Number (type: number, list: no)
The “Group Number” field may not be necessary, since the demo picks a random video from the list of videos that the Current User hasn’t watched. But if you’d prefer to set it up with Groups still, let me know and I can definitely adjust the demo preview! :slight_smile:

ID (type: text, list: no)
This stores the YouTube ID of each Video

UsersWhoWatched (type: User, list: yes)
This stores the list of Users that have watched each particular Video. This is helpful when setting up the search to only display random Videos that the Current User hasn’t seen yet.

User


Watched Videos (type: Video, list: yes)
A list of Watched Videos is stored on the User type, so we can easily keep track of which Videos each User has watched/the total number of Videos each User has watched.

Back on the page, there is the Group Video element. Since Group elements only display one Video at a time (not a list of Videos), we need this Group element to display a single, random Video using the :randomitem operator. To set this up, we can use this data source:

This will automatically show a Video that the Current User hasn’t watched yet. Once the Current User wants to play the next video, clicking the “Go” button will do the following:


Step 1: Make Changes to the Current User (field to change: WatchedVideos add Group Video’s Video)
This action adds the Video which was just played to the Current User’s list of Watched Videos. It’s a little confusing that it says “Group Video’s Video”, but “Group Video” is the element name, and the second “Video” is referring to the Group’s data source (the single, random Video that was just played). This way, Bubble knows which Video to add to the Current User’s list of Watched Videos, by utilizing that Group’s data source.


Step 2: Make Changes to the Group Video’s Video (field to change: UsersWhoWatched add Current User)
This action adds the Current User to the Video that was just played’s list of UsersWhoWatched the Video. Similar to Step 1, “Group Video’s Video” is referring to the Group’s data source – the single, random Video that was just played.

Once that’s all set, the Current User can watch all of the Videos in the database. Once they’ve watched all of the Videos, the Group Video element becomes hidden using this conditional:

In contrast, when the Group Video element becomes hidden, the Group All Videos Were Watched element becomes visible:

In this scenario, the Current User can click “Reset” in order to watch all of the Videos again. The Reset button’s workflow is:


Step 1: Make Changes to a List of Things (List to Change: Current User’s WatchedVideos)
This action removes the Current User from all of the Videos’ list of “UsersWhoWatched”.


Step 2: Make Changes to the Current User
This action clears the list of Videos from the Current User’s “Watched Videos” field.

And that should do it! Please don’t hesitate to let me know if you have any questions, or if I can clarify anything! :slight_smile:

Wow, thank you so much @fayewatson, for your incredibly helpful and thorough response! Using your guide I was able to replicate your steps to get the random video to play on my app. I also feel like I understand the concepts much better, so I’m excited to start changing a few new things to make my app more streamlined, and adding a little more to make it more sophisticated.

Thank you again. I really appreciate it!

1 Like

Awesome!! So glad to hear it was helpful! No problem at all, @alina.learneslpittsb! :slight_smile: