CSS:Multiple choice
Overview
Multiple Choice is a CSS based diagram that allows viewer to select their own choices. http://elearning.ubc.ca/professional-development/connect-institute/
How it works
Note:the Tab shortcode only works on UBC CMS Theme. The multiple choice itself is made out of tab shortcode, and I customized using CSS. Add the following code to enable the multiple choice
/*I added this CSS class so that the styling I do for the shortcode does not affect Tabs in the other pages */ <div class="choices"> [tabs] [tab title="Workshop"] content [/tab] </div>
How to add shapes
- arrow: Just add the following HTML Code
<div class="arrow-down"></div>
- Connect Express: Just add the following HTML code
<a class="circle" href="link"></a>
- Rounded rectangles: Just add the following HTML code
<a class="answer" href="link">You can put any text you want here</a>
- Delivering Course Content:Jut add the following HTML code
<a class="course" href="#course">Delivering Course Content</a>
- Communicating and Collaborating:Just add the following HTML Code
<a class="communicate" href="#communicate">Communicating and Collaborating</a>
- Assignment and Assessments:Just add the following HTML Code
<a class="assignments" href="#assignments">Assignments and Assessments</a>
- Managing your Course:Just add the following HTML Code
<a class="managing" href="#managing"> Managing your Course </a>
How to make the shapes line up
I used div class and li to make the shapes line up. For example, in Delivering Course Content, Communicating and Collaborating, Assignment and assessment, and managing your course, I added the following HTML Code:
<div class="connectbox"> <ul> <li><a class="course" href="#course">Delivering Course Content</a></li> <li><a class="communicate" href="#communicate">Communicating and Collaborating</a></li> <li><a class="assignments" href="#assignments">Assignments and Assessments</a></li> <li><a class="managing" href="#managing"> Managing your Course </a></li> </ul> </div>
and in the CSS, I added the following code"
.connectbox{
font-size:20px;
margin:0 auto;
}
.connectbox ul{
margin:0;
margin-left:-35px;/*This will adjust the location of the objects*/
list-style: none;
width:610px;/*Adjust the width to match up with the total width of the shapes that you want to line up*/
}
.connectbox li{
display: inline;
padding: 0;
margin: ;
float: left;
padding:10px;
}
CSS
Below is the CSS code with the explanation:
/*Multiple choice - Tabs Styling: Based on the CMS tab shortcode*/
.choices .ui-tabs .ui-tabs-nav li
{margin:10px;
}
.choices .ui-tabs .ui-tabs-nav li a{
background:green;
width:170px;
padding:4px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #1497a6;/*you can change the color of the tab here*/
}
.description p{
overflow:hidden;
}
.choices .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .choices .ui-tabs .ui-tabs-nav
li.ui-state-disabled a, .choices .ui-tabs .ui-tabs-nav li.ui-state-processing a {
background:none;
background-color: #0d6872;/*the color of the tab when you select the tab*/
padding:4px;
}
.choices .ui-tabs .ui-tabs-nav li a:hover{
background:none;
background-color: #0d6872;/*the color of the tab when you hover the tab*/
padding:4px;
}
/*This will affect the position of the multiple choice tab */
.choices
{
margin:0 auto;
width:597px;
text-align: center;
font: 13px Arial,Helvetica;
}
.choices .ui-tabs-panel{
padding:0px;
}
/*Rounded Rectangle*/
.answer
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding:10px;
width:230px;
background-color:#1497a6;
color:#fff;
margin: 0 auto;
text-decoration:none;
}
.answer:hover{
color:#fff;
background:#00494c;
text-decoration:none;
}
/*Styling of The choice A, B, C on the first tab*/
.workshopchoice{
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background-color:#1497a6;
padding:3px;
width:100px;
color:#fff;
text-align:center;
margin-right:8px;
float:left;
}
/*Styling of Connect Express */
.circle{
display: block;
overflow: hidden;
height: 0px;
width: 105px;
background-image: url(http://elearning2.sites.olt.ubc.ca/files/2012/08/connectExpress.png);
padding-top: 106px;
text-align: center;
margin: 0 auto;
}
.circle:hover{
background-image:url(http://elearning2.sites.olt.ubc.ca/files/2012/08/connectExpress_hover.png);
}
/*Styling of Connect Institute*/
.institute{
display: block;
overflow: hidden;
height: 0px;
width: 150px;
background-image: url(http://elearning2.sites.olt.ubc.ca/files/2012/08/connectInstitute.png);
padding-top: 148px;
text-align: center;
float:right;
margin-left:25px;
margin-right:15px;
}
.institute:hover{
background-image:url(http://elearning2.sites.olt.ubc.ca/files/2012/08/ConnectInstitute_hover.png);}
/*Styling of the arrow*/
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
margin:15px auto;
border-top: 20px solid #1497a6;
}
/*Making the connect line up*/
.connectbox{
font-size:20px;
margin:0 auto;
}
.connectbox ul{
margin:0;
margin-left:-35px;
list-style: none;
width:610px;
}
.connectbox li{
display: inline;
padding: 0;
margin: ;
float: left;
padding:10px;
}
.connectbox a{
display: block;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 10px;
text-decoration: none;
color: white;
margin: 6px;
text-align: center;
width:100px;
font-size:12px;
}
/*Styling for Delivering Course Content*/
.connectbox a.course {
background-color:#0A5BB2;
}
.connectbox a:hover.course{
background-color:#084275;
}
/*Styling for Communicate and Collaborate*/
.connectbox a.communicate{
background-color:#6FA937;
}
.connectbox a:hover.communicate{
background-color:#53752F;
}
/*Styling for Assignment and Assessment*/
.connectbox a.assignments{
background-color:#FF9406;
}
.connectbox a:hover.assignments{
background-color:#AF5F00;
}
/*Managing your Course*/
.connectbox a.managing{
background-color:#AA1795;
}
.connectbox a:hover.managing{
background-color:#6D1364;
}