We often get questions how to change text size/color, buttons etc inside WatuPRO’s exam area. This short post should answer most of these questions.
Changing the Text or Anything Inside
This is easy. The whole exam content is wrapped in a div with ID “watupro_quiz” and class “quiz-area”. So you can use the class or the ID by your choice to apply any CSS inside. Examples:
(change the font size)
#watupro_quiz {
font-size:16px;
}
(change font color of text in h2 tag)
.quiz-area h2 {
color:blue;
}
Note that in many cases you can overwrite this CSS at a specific question level because you xan format every question through the WordPress rich text editor.
How To Remove The Question Numbers
By default WatuPRO automatically numbers the questions of the quiz. In case you want to hide the numbers, they are all placed in spans with class watupro_num. So to hide them, simply do:
.watupro_num { display: none; }
Choices Show Under Radio Buttons or Checkboxes
Please see here.
If you have other similar questions please ask here in the comments and I’ll update the post.