Thomas Gibbons Consulting Qualtrics Wiki

Contact TomG on Qualtrics Community

User Tools

Site Tools


mcorbit

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

Qualtrics Wiki

mcorbit.txt · Last modified: 2024/09/21 13:35 by admin

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki