React quiz question formatting broken again

[szabonyelviskola]

I have prepared for you a test environment, to show you the problem: site: exam.szabonyelviskola.hu admin cred: user: testuser passw: Test-user-0011. ‘.’ is part of the passw. To see the problem you should get in as a student. student user: student passw: Student.001 The not react test quiz. https://exam.szabonyelviskola.hu/course/mock-exam-2/mock-exam-2/ I have find css solution for 2. and 3. problem. But I can not find parameter, where to change the color of fillblank line. It is grey now, but it would be better if it is white here.

[szabonyelviskola]

This reply has been marked as private.

[szabonyelviskola]

I have solved all my previus questions with custom css, except the 1. with double click in fillblank, which is PHP problem as you wrote. I have a new question: Is it possible to copy or to move the countdown timer from headline to the bottom line, because on fullscreen the bottom line is always visible, but the headline not. Or fix the headline too from scrolling.

[Jackson]

Hello, Yes, This is possible by custom css, but please share video or screenshot what you want to move and at which screen size that has issue to show, Thanks,

[szabonyelviskola]

Here is the screenshoot: https://prnt.sc/u8w40y I would like to copy or move the timer from head of page to the bottom line where the SUBMIT QIUZ | SAVE QUIZ PROGRESS text is written, because this line is fixed even if you scroll the page, so the timer will be always visible.

[Anshuman Sahu]

Please try adding this custom css in your wp-admin -> appearance -> customize-> custom css : .quiz_meta.show_progress { position: fixed; bottom: 0px; z-index: 99999; display:flex; justify-content: space-between; align-items:center; max-width: 200px; } .inquiz_timer > div{width: 40px !important;height:40px!important;} .inquiz_timer > div canvas {width: 40px !important;height:40px!important;} span.countdown { top:10px !important; color: #444; font-size: 10px !important; text-align: center;width:40px;}

[szabonyelviskola]

Thanks Alex! This custom css works great. I'm waiting for the solution for the double click problem at fillblank input field. As you mentioned this is some PHP problem... And also looking forward to react quiz update with working fillblank (minimum with plain text + line breaks formatting). Hope you will find a solution to this soon.

[Anshuman Sahu]

This reply has been marked as private.

[szabonyelviskola]

Thank you very much Alex! A great solution with this box-like cursor! No more double click problem! It should be part of the core system! (I have solved myself the fillblank line in middle issue, with custom css.) Thank you again. I hope you already have some idea about how to solve the react quiz problem with line breaks...

[Jackson]

Hello, okay, Now if your problem is resolved , can we closed this topic? Thanks,

[szabonyelviskola]

Unfortunately, the original problem is not resolved yet. The topic is REACT quiz formatting problem, and as I know the solution is not ready yet. I had to stay at 3.9.9 because this still not resolved formatting problem. We solved some of this not react quiz issues and I really appreciate this. I would like to use the new 4.X system, but for that, I need to be solved this formatting problem of react quiz questions.

[szabonyelviskola]

One remark to @Alex: I have checked the above solution for fillblank click twice issue on Chrome and it is great! But today one student call me that he has a double high box at fillin input. He was using Firefox. I have checked now, and he was right. At first click, in Firefox the cursor box is double high and the cursor itself is at the left upper corner of the box. Clicking the first character for the input the box changes the hight to normal. It should be some kind of cross-browser issue on some css element? Could you check it? How can we get the same great solution in Firefox like in Chrome?

[Anshuman Sahu]

Please remove the above code and add this one .

add_Action('init',function(){
    remove_shortcode('fillblank');
    add_shortcode('fillblank', 'vibe_fillblank');
});

function vibe_fillblank( $atts, $content = null ) {
    global $post; 
    $user_id=get_current_user_id();
    $answers=get_comments(array(
      'post_id' => $post->ID,
      'status' => 'approve',
      'user_id' => $user_id
      ));

    $content =' ';
    if(isset($answers) && is_array($answers) && count($answers)){
        $answer = reset($answers);
        $content = $answer->comment_content;
    }
    if((function_exists('bp_is_user') && bp_is_user()) || (function_exists('bp_is_member') && bp_is_member()))
        return '____________';

    $return ='<div class="vibe_fillblank" contenteditable="true" style="border: none !important;
outline: none !important;
padding: 0 !important;">'.((strlen($content)>2)?$content:'').'</div>';

    return $return;
}

[szabonyelviskola]

Thanks for the solution. It works well without focus box. I have removed the "outline: none !important" from the css code and checked in chrome and firefox. It was working well in both browsers with focus box too. :) Thanks for good idea!

[Anshuman Sahu]

Glad to hear that worked .

[Author]

Posts