How to edit Quiz results Page

[Daniel-Lambert]

Hello, I am wanting to edit the styling of the quiz results page as currently I find it difficult to read. For example to change the font colour, size or indentation. However I cannot find the specific page/area to do so. I have looked on the front and back end to no avail. My website also uses WPBakery Page builder, but I have had no success with that either. If I complete the quiz and go to the results page, then attempt to "Edit this page" it redirects me to the back end editor of the quiz. Any help would be greatly appreciated. Kind regards, Daniel

[Veronica]

hi, the result page uses the jquery there is no specific page for that. we can apply css on that particular popup so let me know in detail that what kind of changes you want on that particular page we can modify it by using custom css.

[Daniel-Lambert]

Thank you Veronica for your quick reply, and sorry for my delay. I have attached screenshots with colour coded requests. I understand if not all the my requests are possible, but any help would be greatly appreciated.   https://prnt.sc/pr36y1 In this screenshot, if possible, these are the changes I would like:

1. (Red) Question is in capital letters - Change to normal formatting

2. (Green)'+' that is used to show answer explanation - changed to text 'View answer'

3. (Blue) Questions that are answered by user is aligned to the right. While questions that are not answers are aligned (not shown) to the left. - Change to ALL indented to the left (as per standard formatting)

4. (Yellow) Change the correct answer to green text

https://prnt.sc/pr36y1 5.(Red) Videos that are inputted into the answer explanation breach the borders of the answer explanation box. 6.(Green) Answer explanation text changed to black. Answer explanation text box background colour changed from grey to orange (#fdc150) Kind regards, Daniel

[logan]

hello, yes, that is possible but for this custom request. I will need your admin URL and credentials to check the CSS selectors on your page. once I receive these unique selectors, I will be able to write custom codes for you.

---

please make sure while sharing credentials it should be in a private reply.

[Daniel-Lambert]

This reply has been marked as private.

[Veronica]

hi, I have tried to make changes as per your need. it requires custom CSS. add this css in apperance>>customize>>custom css

---

ul.quiz_questions span{
   text-transform:none !important;
   margin-left:0px !important;
} .quiz_result ul.quiz_questions .show_explaination:before { content: "View Answer"; font-family: none; } ul.quiz_questions li strong:nth-child(4){ color:green !important; } ul.quiz_questions li strong span p{ color:green !important; } ul.quiz_questions li strong:nth-child(4){ color:green !important; } ul.quiz_questions li strong span p{ color:green !important; }

---

add this code and then let me know the result. check this:http://prntscr.com/ptl95y

[Author]

Posts