Table of Contents
mcOrbit - Arrange choices in circle
The mcOrbit function arrange the choices of a multiple choice question in a circle. Features include:
- Supports single/multi-select and randomization
- Supports setting position of first choice
- Supports setting of circle radius and circle center
- Supports styling of choice test
This function is available for a reasonable fee. Contact https://community.qualtrics.com/inbox/conversation?with=373 on the Qualtrics Community to learn more.
Set-up Instructions
Survey Header
Add the mcOrbit function to the survey header to make it available to any question in the survey. Go to Look & Feel → General → Header edit → and paste the provided mcOrbit function JS:
<script>/*Paste mcOrbit function JS here*/</script>
Alternatively, paste the mcOrbit function JS into a question's JS outside the existing Qualtrics functions to make it available to questions on the page.
Question HTML
Add HTML to the question to contain the circle and choices:
<div style="width:100%;height:55vh;margin:0px auto;> <ul class="circle" > </ul> </div>
To add a picture in the center of the circle, add a background image to the <div> that contains the circle:
<div style="width:100%;height:55vh;margin:0px auto;background-image: url(https://marketinview.yul1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_bf1HeJ65xzdYNEN);background-size:150px;background-repeat:no-repeat;background-position:center;">
Question JavaScript
Add JS to call the mcOrbit function to apply it to the multiple choice question as follows:
Qualtrics.SurveyEngine.addOnload(function() { mcOrbit(this); });
To override the default options, specify the desired options is the second function argument as an object. For example:
Qualtrics.SurveyEngine.addOnload(function() { mcOrbit(this, {start:-60,radius:"8em",top:"42%",left:"48%"}); });
CSS
Use the classes circleItem and circleChecked to style the choices inside a <style> tag added to the question text of in Custom CSS. For example:
.circleItem { display:block; font-size:1em; max-width:15vw; line-height:1.25em; padding:5px; text-align:center; } .circleItem.circleChecked { outline: 2px solid blue; }
Options
left
The horizontal position of the center of the circle from the left side. Can be express in pixels, percent, etc.
Default: "48%"
radius
The radius of the circle. Can be expressed as pixels, ems, etc.
Default: "8em"
start
The position of the first choice expressed as an angle from right side of the circle (i.e., start:0) is directly right of the center of the circle).
Default: -90
top
The vertical position of the center of the circle from the top. Can be express in pixels, percent, etc.
Default: "48%"