Gilly - Test Widget Customization

Test taking widget in Gilly can be customized using the CSS. Here is an example CSS which can be added in Confluence via Confluence Admin->Stylesheet.

Here is an example CSS 

#testQuestionsDiv{
border:1px solid #cccccc; border-radius:4px; width:75%; height:400px; overflow:auto;
}

#testSidebar{
border:1px solid #cccccc; border-radius:4px; background-color:#F0F0F0; width:20%
}

#questionIndex{
padding:0px; margin:5px
}

#questionIndex li{
width:24px; height:24px; border:1px solid #cccccc;cursor:pointer; line-height:24px; border-radius:4px; background-color:#ffffff
}

#questionIndex li.yellowbg{background-color:#78C99F}
#questionIndex li.lightbluebg{background-color:#82D9FF}


.questionBody, .choiceLabel, .questionSelectionControl,.questionIndex{background-color:transparent;}

.questionIndex{font-size:50px; margin:0px; padding:0px; line-height:1}
.questionText, .questionText *{margin:0px; padding:0px; font-size:16px}
.questionText p, .choiceText p{margin:0px; padding:0px}

.questionText, .choiceLabel, .questionSelectionControl, .choiceText{padding:5px}

table.questionChoices{
border:1px solid #cccccc; border-radius:4px; margin:5px;padding:4px; width:90%
}
    

 

 

And it results in test widget looking as shown below.