Qualtrics Survey JavaScript Popups Part 2: Adding Bolded or Underlined Text + Images!
Welcome back to the Qualtrics survey JavaScript Popup Series! In this highly anticipated sequel, we're taking things up a notch by introducing you to the power of Bootstrap modal popups. Many of you really liked the JavaScript popups I showed you in late 2022, but some of you wished it were possible to implement bolded or underlined text. Others asked if it was possible to embed a picture in the pop-ups. Well, in this video you can say goodbye to the constraints of traditional JavaScript popups and hello to a world of endless possibilities. Follow along as I demonstrate how to enhance your survey questions with rich content such as bolded/underlined text and images, all within the sleek confines of a modal popup window.
Whether you're a seasoned survey creator or just getting started, this tutorial will equip you with the tools you need to captivate your respondents and gather valuable insights. Best of all, NO PRIOR CODING EXPERIENCE NEEDED!
BOOTSTRAP MODAL BACKGROUND
What is a modal?: A modal is like a popup window that appears on top of the webpage content, kind of like a layer that temporarily covers the page. It's used to display additional information, ask for user input, or confirm an action without navigating away from the current page.
Bootstrap's role: Bootstrap provides pre-designed modal templates and JavaScript functionality to easily create and control modals without having to write a lot of custom code from scratch.
Setting it up: To use a Bootstrap modal, you include the necessary Bootstrap CSS and JavaScript files in your HTML document. Then, you create a modal structure within your HTML code, specifying the content you want to display inside the modal.
Triggering the modal: You can trigger the modal to open using various methods, such as clicking a button, a link, or even automatically when the page loads. This trigger is usually implemented using JavaScript.
Customization: Bootstrap modal allows for extensive customization. You can adjust the size, position, animation, and styling of the modal window to fit the look and feel of your website or application.
Interaction: Once the modal is open, users can interact with it just like any other part of the webpage. They can read the content, click buttons or links inside the modal, and even fill out forms if necessary.
Closing the modal: Users can close the modal by clicking on the close button, clicking outside the modal window (if configured to do so), or pressing the escape key on their keyboard. You can also programmatically control the modal to close it using JavaScript.
Accessibility: Bootstrap modal is designed with accessibility in mind, ensuring that users with disabilities can still interact with the modal effectively using assistive technologies like screen readers.
Overall, Bootstrap modal simplifies the process of creating interactive popup windows on your website or web application, making it easier for developers to enhance user experience and engagement.
MODAL CODE EXAMPLES
Qualtrics blank template code: https://controlc.com/78d49d40
Qualtrics example with text and image: https://controlc.com/6837d833
VIDEO TIMELINE
0:00 - Intro
0:05 - Video Background/Overview
0:30 - Background on Bootstrap Modal
0:48 - Getting the code
1:08 - Open text editor, put in our code
1:40 - Looking at CSS and JavaScript file imports
2:05 - Triggering the modal popup
2:33 - Add in our modal title
2:56 - Adding in our main text to our modal popup
4:23 - Checking out our first draft
4:35 - Adding a picture to our modal popup
5:50 - Making a few tweaks (text buffer in modal)
6:17 - Making a few tweaks (altering size of modal)
6:56 - Get ready add code from text editor into Qualtrics HTML view
7:49 - Wrapping up
8:22 - Outro
