====== 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

Here is an example:\\
{{ ::mcOrbit.jpg?400 |mcOrbit Example}}

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 -> {{::icon_source.jpg?20|}} and paste the provided mcOrbit function JS:
<code>
<script>/*Paste mcOrbit function JS here*/</script>
</code>
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:
<code>
<div style="width:100%;height:55vh;margin:0px auto;>
<ul class="circle" >
</ul>
</div>
</code>
To add a picture in the center of the circle, add a background image to the %%<div>%% that contains the circle:
<code>
<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;">
</code>
=== Question JavaScript ===
Add JS to call the mcOrbit function to apply it to the multiple choice question as follows:
<code>
Qualtrics.SurveyEngine.addOnload(function() {
	mcOrbit(this);
});
</code>

To override the default options, specify the desired **[[mcorbit#options|options]]** is the second function argument as an object. For example:
<code>
Qualtrics.SurveyEngine.addOnload(function() {
	mcOrbit(this, {start:-60,radius:"8em",top:"42%",left:"48%"});
});
</code>
=== 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:
<code>
.circleItem {
   display:block;
   font-size:1em;
   max-width:15vw;
   line-height:1.25em;
   padding:5px;
   text-align:center;
}
.circleItem.circleChecked {
   outline: 2px solid blue;
}
</code> 
===== 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%"%%
====== Qualtrics Wiki ======
[[start|Qualtrics Wiki]]