Zu Hauptinhalten wechseln

FV Decipher Unterstützung

Alle Themen, Ressourcen für FV Decipher benötigt.

 
decipher

Customizing the Media Evaluator Element

Note that the media evaluator question is not fully supported on cloud servers at this time.

1:  Overview

The media evaluator element is a great way to get feedback on a video, enabling respondents to rate the video in real time using a slider.

bcme_base.png

2:  Underlying Question Architecture

This dynamic style sits on top of a <textarea> question. See below for an example of the base XML code required.

<textarea label="Q1" optional="0">
 <title>
   As you're viewing the following video, please drag the slider to rate your level of enjoyment.
 </title>
 <comment>Please hit play to view and rate the video</comment>
</textarea>

The code above produces the following result:

bcme_base_xml.png

3:  Converting to the Media Evaluator Element

To add the media evaluator element to this question, update the <textarea> tag as shown below:

<textarea label="Q1" optional="0" uses="bcme.5">
 <title>
   As you're viewing the following video, please drag the slider to rate your level of enjoyment.
 </title>
 <comment>Please hit play to view and rate the video</comment>
</textarea>

This change produces the following result:

bcme_base_transformed.png

4:  Customization

Listed below are all of the attributes available for this element. Override them to create a custom look and feel for your media evaluator element:

Click on an attribute to navigate there.

 

  • bcme:video_id
    • The unique video id provided in the file manager. Learn more.
    • Type: String
    • Example: bcme:video_id="25489134688552" will reference video with the id number provided. The video ID must not be an evaluated expression (e.g. a resource tag or pipe).
  • bcme:width
    • The video's width in pixels
    • Type: int
    • Default: 640
    • Example: bcme:width="1280" will display the video with a width of 1280px
  • bcme:height
    • The video's height in pixels
    • Type: int
    • Default: 360
    • Example: bcme:height="720" will display the video with a height of 720px
  • bcme:pause_enable
    • Allow the respondent to pause the video playback?
    • Type: bool
    • Default: 0
    • Example: bcme:pause_enable="1" will allow the video to be paused
  • bcme:autostart
    • (Desktop browsers only) Start the video immediately after load?
    • Type: bool
    • Default: 0
    • Example: bcme:autostart="1" will start playing the video immediately when it has loaded
  • bcme:autosubmit
    • Automatically advance to the next page when the video has finished playing?
    • Type: bool
    • Default: 0
    • Example: bcme:autosubmit="1" will go to the next page as soon as the video has played through
  • bcme:watermark
    • The text to display as a watermark on the video
    • Type: String
    • Example: bcme:watermark="${uuid}" will show the respondent's uuid variable on the video as it plays
  • bcme:watermark_position
    • The position of the watermark text relative to the video (Top Left, Top Right, Bottom Left, Bottom Right)
    • Type: enum
    • Default: Top Left
    • Example: bcme:watermark_position="Bottom Right" will display the watermark text in the bottom right of the video
  • bcme:watermark_animated
    • Should the watermark periodically move from its initial position across the video?
    • Type: bool
    • Default: 0
    • Example: bcme:watermark_animated="1" will animate the watermark to move across the entire video
  • bcme:slider_orientation
    • The orientation of the rating slider (Horizontal, Vertical)
    • Type: enum
    • Default: Horizontal
    • Example: bcme:slider_orientation="Vertical" will show the slider to vertically to the right of the video instead of horizontally below the video
  • bcme:slider_min
    • The minimum rating value of the slider (must be less than slider_max)
    • Type: int
    • Default: 0
    • Example: bcme:slider_min="10" will not allow a rating value any less than 10
  • bcme:slider_max
    • The maximum rating value of the slider (must be greater than slider_min)
    • Type: int
    • Default: 100
    • Example: bcme:slider_max="50" will not allow a rating value any greater than 50
  • bcme:slider_range
    • Select whether a colored range should be shown on the track from the minimum or maximum value (none, min, max)
    • Type: enum
    • Default: none
    • Example: bcme:slider_range="max" will add a colored fill from the right side of the track to the slider handle
  • bcme:slider_step
    • A whole number representing the interval of each slider point. Note: The value range of the slider (max - min) should be evenly divisible by the interval.
    • Type: int
    • Default: 1
    • Example: bcme:slider_step="10" will increment/decrement the value by ten with every movement of the slider
  • bcme:legend_left
    • Text to display on the left-most slider point
    • Type: String
    • Example: bcme:legend_left="Completely Dissatisfied" will display "Completely Dissatisfied" on the far left of the slider track
  • bcme:legend_middle
    • Text to display on the middle slider point
    • Type: String
    • Example: bcme:legend_middle="Neither Satisfied nor Dissatisfied" will display "Neither Satisfied nor Dissatisfied" on the middle of the slider track
  • bcme:legend_right
    • Text to display on the right-most slider point
    • Type: String
    • Example: bcme:legend_right="Completely Satisfied" will display "Completely Satisfied" on the far right of the slider track
  • bcme:engagement_text
    • Text to display after the engagement time to remind the respondent to engage with the video by sliding the slider
    • Type: String
    • Default: Please use the slider to indicate your preference for the video.
    • Example: bcme:engagement_text="Don't forget to slide the slider!" will update the text shown to respondents after the engagement time has passed
  • bcme:engagement_time
    • The number of seconds that the slider handle is inactive for before displaying the engagement text
    • Type: int
    • Default: 10
    • Example: bcme:engagement_time="5" will show the engagement text after 5 seconds if the handle hasn't been slid
  • bcme:engagement_skin
    • The skin (style) of the engagement text (black, blue, cloud, dark, facebook, lavender, light, lime, liquid, salmon, yellow)
    • Type: enum
    • Default: light
    • Example: bcme:engagement_skin="black" will update the style of the engagement text dialog to black
  • bcme:tuneout
    • Allow the respondent to virtual tune out of the video?
    • Type: bool
    • Default: 0
    • Example: bcme:tuneout="1" will show an additional button to allow the respondent to tune out of the video, setting the slider to the lowest possible value (or whatever is specified for bcme:tuneout_value)
  • bcme:tuneout_text
    • Text to display on the tuneout button
    • Type: String
    • Default: Tune Out
    • Example: bcme:tuneout_text="Not Paying Attention" will change the text of the tune out button
  • bcme:tuneout_value
    • When the tune out button is clicked, what value should the slider move to? (keep, min)
    • Type: enum
    • Default: min
    • Example: bcme:tuneout_value="keep" will keep the value where the slider is when the button was pressed
  • bcme:containerCSS
    • CSS for the main container of the media evaluator
    • Type: CSS
    • Example: bcme:containerCSS="border: 1px solid black;" will add a thin black border around the entire media evaluator
  • bcme:watermarkCSS
    • CSS for the watermark text
    • Type: CSS
    • Example: bcme:watermarkCSS="color: red;" will display the watermark text in a red color
  • bcme:overlayContentCSS
    • CSS for the video container overlay
    • Type: CSS
    • Example: bcme:overlayContentCSS="border: 2px solid red;" will add a thick red border around the video content overlay
  • bcme:mediaControlsCSS
    • CSS for the media controls container
    • Type: CSS
    • Example: bcme:mediaControlsCSS="background: red; opacity: 100; filter: alpha(opacity=100);" shows the media controls with a red background and zero transparency
  • bcme:mediaControlsHideCSS
    • CSS for the media controls when they are hidden
    • Type: CSS
    • Example: bcme:mediaControlsCSS="opacity: 100; filter: alpha(opacity=100);" will prevent the media controls from hiding
  • bcme:videoPositionCSS
    • CSS for the video position timer in the media controls
    • Type: CSS
    • Example: bcme:videoPositionCSS="color: red;" will show red timer text instead of the default white text
  • bcme:positionContainerCSS
    • CSS for the track representing the current position of the video
    • Type: CSS
    • Example: bcme:positionContainerCSS="background: red;" will show a red track instead of the default grey one
  • bcme:positionIndicatorCSS
    • CSS for the overlay track that represents the current, growing position of the video
    • Type: CSS
    • Example: bcme:positionIndicatorCSS="background-color: red; background-image: none;" changes the position indicator track to red instead of white
  • bcme:videoLengthCSS
    • CSS for the video length text displayed on the right side of the media controls
    • Type: CSS
    • Example: bcme:videoLengthCSS="color: red;" shows the video length text in a red color instead of white
  • bcme:sliderContainerCSS
    • CSS for the main slider container
    • Type: CSS
    • Example: bcme:sliderContainerCSS="border: 2px solid red;" adds a thick red border to the slider container
  • bcme:uiSliderCSS
    • CSS for the main slider track that the slider handle sits on
    • Type: CSS
    • Example: bcme:uiSliderCSS="background: red;" updates the background color for the slider track from grey to red
  • bcme:uiSliderRangeCSS
    • CSS for the main slider range
    • Type: CSS
    • Example: bcme:uiSliderRangeCSS="background: black;" shows a range with a black background
  • bcme:uiSliderHandleCSS
    • CSS for the main slider handle
    • Type: CSS
    • Example: bcme:uiSliderHandleCSS="color: red;" updates the slider value color to red
  • bcme:uiHandleHelperParentCSS
    • CSS for the track that the slider handle resides on (a subset of the main slider track)
    • Type: CSS
    • Example: bcme:uiHandleHelperParentCSS="background: black;" updates the background color for the slider handle's parent track
  • bcme:sliderLegendCSS
    • CSS for the legend text container
    • Type: CSS
    • Example: bcme:sliderLegendCSS="color: red;" updates all legend text coloring to red
  • bcme:sliderLegendLeftCSS
    • CSS for the left legend
    • Type: CSS
    • Example: bcme:sliderLegendLeftCSS="font-weight: bold;" updates the font-weight for the left legend
  • bcme:sliderLegendMiddleCSS
    • CSS for the middle legend
    • Type: CSS
    • Example: bcme:sliderLegendMiddleCSS="font-weight: bold;" updates the font-weight for the middle legend
  • bcme:sliderLegendRightCSS
    • CSS for the right legend
    • Type: CSS
    • Example: bcme:sliderLegendRightCSS="font-weight: bold;" updates the font-weight for the right legend
  • bcme:buttonsContainerCSS
    • CSS for the tune out button container
    • Type: CSS
    • Example: bcme:buttonsContainerCSS="border: 2px solid black;" adds a thick black border to the tune out button container
  • bcme:tuneoutButtonCSS
    • CSS for the tune out button
    • Type: CSS
    • Example: bcme:tuneoutButtonCSS="font-weight: bold;" updates the tune out button's font-weight
  • bcme:tuneoutActiveCSS
    • CSS for the tune out button when it has been pressed in
    • Type: CSS
    • Example: bcme:tuneoutActiveCSS="color: red;" updates the font color to red when the tune out button has been selected

5:  Customization Example

The attributes above can be added to your project to customize the look and feel of your media evaluator element. View the example below as a guide to help you modify these attributes and create something that fits the needs of your project.

5.1:  Example 1

In this example, we modified the element to relatively neutral black and white tones. A range is shown going from the minimum range to the handle and we used this handy gradient editor tool to give it a nice, white-to-black color. View the XML code below to see what attributes were added.

Example 1 XML Code

<textarea label="Q1" optional="0" uses="bcme.5"
 bcme:legend_left="Dissatisfied"
 bcme:legend_middle="Neutral"
 bcme:legend_right="Satisfied"
 bcme:sliderLegendCSS="font-weight: bold;"
 bcme:tuneout="1"
 bcme:tuneout_text="Not interested at all"
 bcme:uiSliderHandleCSS="background-color: black; color: white;"
 bcme:watermark="${source}"
 bcme:watermarkCSS="background-color: black; color: white;"
 bcme:slider_min="-50"
 bcme:slider_max="50"
 bcme:slider_step="5"
 bcme:slider_range="min"
 bcme:uiSliderRangeCSS="
  background: #7d7e7d;
  background: -moz-linear-gradient(left, #7d7e7d 0%, #0e0e0e 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e));
  background: -webkit-linear-gradient(left, #7d7e7d 0%,#0e0e0e 100%);
  background: -o-linear-gradient(left, #7d7e7d 0%,#0e0e0e 100%);
  background: -ms-linear-gradient(left, #7d7e7d 0%,#0e0e0e 100%);
  background: linear-gradient(to right, #7d7e7d 0%,#0e0e0e 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=1 );">
  <bcme:video_id>2538276499001</bcme:video_id>
  <title>
    As you're viewing the following video, please drag the slider to rate your level of enjoyment.
  </title>
  <comment>Please hit play to view and rate the video</comment>
</textarea>

Example 1 XML Code Description

Here is a brief description of each attribute that was added:

  • bcme:legend_left="Dissatisfied"
    bcme:legend_middle="Neutral"
    bcme:legend_right="Satisfied"
    • These attributes add the legend text that you see just beneath the slider track
  • bcme:sliderLegendCSS="font-weight: bold;"
    • The legend text was emboldened to emphasize the direction of the rating scale
  • bcme:tuneout="1"
    bcme:tuneout_text="..."
    • The tune out button was enabled
    • the text was updated from "Tune Out" to "Not interested at all"
    • If a respondent clicks the button, the slider will go immediately to the minimum value available
  • bcme:uiSliderHandleCSS="..."
    • The handle's style is updated to show white text on a black background
  • bcme:watermark="${source}"
    bcme:watermarkCSS="..."
    • The source variable will be the watermark shown on the video (e.g. /proj1234?source=watermark)
    • The watermark's style is updated to show white text on a black background
  • bcme:slider_min="-50"
    bcme:slider_max="50"
    bcme:slider_step="5"
    • Instead of the default 0 - 50 scale, the range values go from -50 - 50
    • Each time the respondent adjusts the slider handle, the value will decrement/increment by 5 instead of 1
  • bcme:slider_range="min"
    bcme:uiSliderRangeCSS="..."
    • A range is added to show how much value is given to the video at its current position
    • This also helps emphasize that the rating scale does indeed represent value
    • The range's style is updated to show a gradient white-to-black color scheme
    • Note: This could be a solid color, outline or a gradient such as rainbow colors
  • <bcme:video_id>...</bcme:video_id>
    • This is a different way of adding attributes and values to your element
    • This is where we define which video it is we want to display
    • Learn more about Uploading System Files such as videos

Example 1 Demo

Click here to see this example in a live survey.

6:  What's Next?

Check out the Media Evaluator Element document if you need to add this dynamic style using the survey builder.

Here are some awesome CSS references you can use to further customize your question style:

  • War dieser Artikel hilfreich?