Reinvent Quiz Model(quiz_timeline) for Better Navigation.

[asharamseervi]

Hi Mr. Vibe, (Nice Name haah!!) I’m Asharam Seervi, not Bapu. Everything is perfect or can be eliminated for my project except Quiz Model. My aim is to avail free mock preparation for fellow Indian Students. As I raised voice at Themeforest Comment Section regarding this. Now, Discussion point for Support is here. Really, I want to make either another child-theme or to integrate everything into parent theme. We together can achieve our aim. Kindly need your best support as possible. I’m willing to reinvent Quiz Model with extra benefits. I will explain everything, wait. Please log-on to https://gradeup.co, https://testbook.com/ or http://thepracticetest.in/SSC/ with dummy account. However, http://thepracticetest.in/SSC/ doesn’t require any account, just fill any info. Go to Quiz/Test Model. This is what actual online exam UI appears. Basically, For all purpose, I want to show you some functionalities & UI Structure. Don’t be angry haah . At WPLMS, quiz-sidebar which is having Timer & Scroll Down, Serial wise question(quiz_timeline) list for navigation. Honestly, Everyone is accepting this feature, I mean not happy with that. You should really have to look upon that. We can achieve it like real exams happening at India. I’m not saying to focus on Indian as well. Kindly instead quiz_timeline, we can make here, a navigation panel, containing Question Numbers, No matters Circle or Cube. Extra Benefit is that, We can re-invent here with Color Schemes, like If you have attempted & saved, Green Box will be updated and If tagged than Yello and Left question without an answer to Red. How is that? Really important, At least attempted & Non-attempted should be there. I’m a purposing idea in a funny manner doesn’t mean that I didn’t need it as important. Honestly, I need to implement this by today itself. No more day left. I need it as Higher Priority. Please guide me either with thought or with snippet or with a child theme. If you’re not thinking to go with my idea. Please, consider my request and help me with the above concern asap. Atleast guide me, which scss file for styling, has to be updated and what JS & PHP files you update then I can achieve above-said request. Also tell me, either I have to create a child theme or what. I really need to do it today itself, Please consider my request & do it with Higher Priority. Thankyou. Reference Images (Might Help): 1. Color Code Scheme Instruction: https://screenshot.net/zrg17i8 2. Save & Next, Tags: https://screenshot.net/zeg1nsz 3. Quiz Navigation Expectation with WPLMS: https://screenshot.net/zpgj5to (above Ramayana is for this only.) Today, If I get customized scss code for class “quiz_timeline” at file /assets/css/scss/content/_quiz.scss file. The name which refers id of questions, for example, Question1 is mapped with id=”ques1181”. What I want to customize is, “the term ‘Question 1’ should be a box having numerical 1 only and that box will be mapped to ID of the question with same functionalities, that if attended than green and not attended than red.”Exactly to this image:https://screenshot.net/zpgj5to This is exactly fulfilling my purpose for today. Help with that. Sorry, At forums, I was not able to find my own question i.e. why adding here support question. Kindly Note:The above two comments are summarized in technical terms in this comment. Please do the needful. As per posted back to Themeforest comments: https://themeforest.net/comments/15656561 and it's sub-comments in thread.

[MrVibe]

1. Color Code Scheme Instruction: https://screenshot.net/zrg17i8 : POSSIBLE,  but only the marked and unmarked versions are available. 2. Save & Next, Tags: https://screenshot.net/zeg1nsz  : Possible but there is not save and review option available. 3. Quiz Navigation Expectation with WPLMS: https://screenshot.net/zpgj5to : Possible.   All three are possible via CSS alone. I will share the code fix in next answer. Do you also need different shapes or colors will do ?   p.s : Unfortunately, customisations are not part of theme support, so please give us some time for  helping you with this.

[asharamseervi]

Thankyou so much Mr. Vibe. Loved you. Superb. Briefly explaining your answers with my answers,   1. If only marked and unmarked versions are available, Okay. We will do customization in future. Everything doesnt mandetory now, Right? I'm happy, what I'm getting. Because, It's really important and Urgent for today. I have to manage tests of my students by Sunday morning, i.e. why, Requesting you to help me with Hight Priority. Thanks in advance. 2. No need of Save & Review. If Save & Next will work, Okay for now. 3. This panel is the important one. Yes, really, Do this as important. Waiting for your reply.

[asharamseervi]

An updates Mr. Vibe on this? Kindly, help me with this.

[H.K. Latiyan]

For the quiz questions add the bellow css in your appearance->customize->custom css: .quiz_timeline li,.quiz_timeline li.done{border:none;margin:0;padding: 5px 5px 5px 20px;margin:5px;float:left;display: inline-block;} .quiz_timeline li > a{display:none;} .quiz_timeline li >span{top:auto;left:5px !important;} .quiz_timeline{ margin:0; counter-reset: my-badass-counter; }.quiz_timeline li{padding: 5px 5px 5px 30px !important;border:1px solid rgba(0,0,0,0.2) !important;border-radius:5px;background-color:rgba(255,255,255,255);} .quiz_timeline li:before { content: counter(my-badass-counter); counter-increment: my-badass-counter; }   Result: ---------------------   For the performance please refer these screenshots: and

[asharamseervi]

Hello, Thankyou so much Mr. Vibe for this code. CSS done its job perfectly, but couldn't able to perform functions. Like while clicking on Question No. from Panel, couldn't proceed to next question or any rendom question we want to look. Will you please help me with this. Thankyou so much for recent update, this is wonderful to look new features. :) Please have a look at this: https://youtu.be/SFWg4xdcN4Y ps: I'm using blank child theme for testing this, I don't think so it affects.

[H.K. Latiyan]

Ok, Please first remove the previous css given by me and then try adding the bellow custom css: .quiz_timeline li,.quiz_timeline li.done{border:none;margin:0;padding: 5px 5px 5px 20px;margin:5px;float:left;display: inline-block;}  .quiz_timeline li > a{width: 35px;overflow: hidden;position: absolute;top: 5px;left: 2px;opacity: 0;} .quiz_timeline li > a span{display:none;} .quiz_timeline li >span{top:auto;left:5px !important;} .quiz_timeline{margin:0;counter-reset: my-badass-counter;} .quiz_timeline li{padding: 5px 5px 5px 30px !important;border:1px solid rgba(0,0,0,0.2) !important;border-radius:5px;background-color:rgba(255,255,255,255);} .quiz_timeline li:before {content: counter(my-badass-counter);counter-increment: my-badass-counter;}

[Author]

Posts