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.