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%"

