HTML Element

The HTML element in Cinema8 allows you to add custom content and dynamic variables to your videos. It is a versatile tool for creating interactive elements such as custom texts, gamified experiences, or personalized messages based on viewer actions. One powerful application is using variables to implement gamification, such as awarding badges for correct answers.
" " How to Add and Use the HTML Element" "

Step 1: Add the HTML Element

 

• Log in to Cinema8, select your video, and open it in the Creative Studio.
• Drag the HTML Element onto the Timeline

• From the Elements Panel, drag the HTML Element to your desired position on the timeline.
• Provide a unique name for the element (e.g., 'Badge Reward Display').

Step 2: Customize the HTML Element

Enter Custom Content

• Use the HTML editor to enter text, images, or videos.
• You can also incorporate dynamic variables into your HTML content.

Example: Gamification with Badges and Variables

Let's create a quiz where viewers earn a badge for achieving a specific score. For instance, if a viewer answers at least 2 out of 3 questions correctly, they will earn the 'Honesty Badge'.

Add the Badge Image

• Upload the badge image to your Cinema8 Image Library
• Drag an Image Element onto the timeline and place it where you want the badge to appear.
• Disable the 'Visible' option in the Properties Panel for this image until the condition is met.

Create the Quiz Questions

• Drag and drop a Single Select Question element onto the timeline for each question.
• Set the score for each correct answer (e.g., score = 1 for each correct answer).

Add a Conditional Widget to Check the Score

• Drag a Conditional Widget onto the timeline after all questions have been answered.
• Set the condition, such as 'If score = 2, display the badge'.
• Choose 'Set Visible' as the action to display the badge image when the condition is met.

Step 3: Test and Finalize the Gamification Logic

Preview the Video

• Use the Preview feature to test if the badge appears when the score condition is met.

Save and Publish Your Video

• Once satisfied, save your video and make the gamified experience live.

Best Practices for Using the HTML Element

• Keep it simple: Avoid overloading the video with too many dynamic elements. Focus on one or two key actions.
• Personalize the experience: Use dynamic variables to provide personalized messages based on viewer interaction.
• Test functionality: Always preview your video to ensure the HTML elements work as intended.

Next Steps

Start integrating HTML elements today to make your videos more interactive