React quiz question formatting broken again

[szabonyelviskola]

React quiz fill in blank question formatting broken that was the original question and you closed before it was solved or even answered my last remarks, that this not a 3 party plugin problem. Here is the basic flow of QandA process: "I'm using now 3.9.9 version and all my multiply fillblank question formatting is broken in any react quiz. This is the broken formatted question in the quize: https://prnt.sc/tvzuqu and this is the question as it is written in backend visual and text form:https://prnt.sc/tvzwdo What could be the problem? I was given all the data for you but, your answer was: Jackson (Moderator): "Hello, For the Quiz Formatting : This Issue of styling arises due to your third party plugin Please deactivate all from your backend, And please update vibe course module and vibe shortcode plugin as well, Thanks, My last answer before you closed the question before any answer: "The vibe plugins are updated. I have done several tests. I have deactivated step-by-step all the plugins except the core wplms and vibe and elementor. I have deactivated even the backup and cache and security plugins. And I have checked the page on a different browser cleared the cache after every change in plugin list. Nothing happened. The problem remains the same in a very basic system too. So this is not a 3 party plugin problem. Please make yourself a multiply fillblank react quiz question, put it into a quiz and check in your system. I'm sure you will get the same result. If not please send me a screenshot that you could do it... and give me your plugin list." So, please do not close one open question until it is not solved!!! And this question is not solved. I'm waiting your quick answer, my client is in a hurry to start his courses.

[Anshuman Sahu]

Please try adding this custom code in your wplms-customzer.php file in wplms customizer plugin :

add_action('the_content',function ($content){
    global $post;
    $removed = 0;
    if($post->post_type=='quiz' && strpos($post->post_content, '[fillblank')!==false){
        remove_filter( 'the_content', 'wpautop' );
        $removed = 1;
    }

if(empty($removed)){
    if($post->post_type=='question' && strpos($post->post_content, '[fillblank') !==false){
        remove_filter( 'the_content', 'wpautop' );
        $removed = 1;
    }

}

if(empty($removed)){
    if(strpos($content, '[fillblank') !==false){
        remove_filter( 'the_content', 'wpautop' );
        $removed = 1;
    }

}

},1);

[szabonyelviskola]

This is what I'm waiting for as a solution. But unfortunately, this is still not good. If I activate the script in wplms customizer plugin, then all the text and media content is disappearing from the question statement and option part. In any question type: even long text, match, dropdown, fillblank...

[szabonyelviskola]

I can not send for some reason the post to you, so I'm trying to split the content... I think you are on a good way around those special character handling because this could be the problem in react multiply fillblank and dropdown style questions packing the content to thight. I hope we will find in this way the solution to this problem!

[szabonyelviskola]

I can't send this post so I trying splitting it to more part: Screen with activated script: https://prnt.sc/u34t8k In this case, all fill in holes are packed.

[Anshuman Sahu]

Yes the script given is creating an error ,please try out this code :

add_filter('the_content',function ($content){
    global $post;
    $removed = 0;
    if($post->post_type=='quiz' && strpos($post->post_content, '[fillblank')!==false){
        remove_filter( 'the_content', 'wpautop' );
        $removed = 1;
    }
    
    if(empty($removed)){
        if($post->post_type=='question' && strpos($post->post_content, '[fillblank') !==false){
            remove_filter( 'the_content', 'wpautop' );
            $removed = 1;
        }
        
    }

    if(empty($removed)){
        if(strpos($content, '[fillblank') !==false){
            remove_filter( 'the_content', 'wpautop' );
            $removed = 1;
        }
        
    }
    return $content;
},1);

If still does not works then please share your site url , admin creds , and valid ftp credentials in private reply .

[szabonyelviskola]

This reply has been marked as private.

[Anshuman Sahu]

Im sorry I tried to fix it but in react quiz we parse whatever the content you add in question and pull out the fillblanks to render the react componenets . this is necessary to capture the inputs but with your question html it is breaking the layout when we are extracting the fillblanks and joining back the question content back together. I thin you have to use the old quizzes in such a matter ,

[szabonyelviskola]

This is very very very sad!!!! Should be some workaround... or you should rethink the whole question capturing process... This is crazy that even if you have only 1 sentence with 1 fillblank input, the end of the sentence is lifted in a higher row... This is a huge error in displaying! In this way your favorite react quizzes are useless! Also, it means for me that it is not possible to use the fillblank and dropdown questions in the new 4.x system because there you have only react quizzes... Moreover, according to your answer, it is not possible to use any HTML question content in react quizzes without layout problems. It is a huge disadvantage. especially that in the new version you have only react quizzes... I'm not familiar with react processes and I do not see the details of the coding problem, but I think this is a fundamental problem of react quizzes! You should solve it somehow especially because now you do not have the old not react version in your system.

[Anshuman Sahu]

Well the only possibe way to make it work is to remove the list order in your question html . built the content again without using ul,ol lists . but with just plain text and line breaks .

[szabonyelviskola]

This would be a possible workaround till you solve the real problem in react quiz system, but unfortunately, it is NOT WORKING! This was the first I have tried before started the topic here. If you would have tried it you also should know that this is not helpful. Your react quiz system with fillblanks did not take into account any line break! All the text even the plain text with line breaks are packed in one stupid format, with lifted dots and lifted text at the and of the sentence... (yes, the end of the text is lifted in a higher row after the fillblank input area, even if it is a plain text) But if you could change the system as the first step of resolution of this problem in such a way that if I use plain text with line breaks than the format will remain as it is in the content of the question, I will accept it temporarily. I will explain to you why is this temporary solution: for example for the dropdown questions you need to use HTML elements because your program can not identify the elements of question. So for the final solution, you should handle the HTML elements too. I'm accepting any solution which can resolve the bad displaying issue, but not with sacrificing the new 4.x system features. Please forward this message together with my earlier post to @Mr.Vibe. I hope he will understand that there is a core and fundamental react process problem behind this layout issue if you can not resolve it easily. P.M. I have checked the old, not react system and already find 3 problems: 1. Somewhere in the forum I have already seen a topic about the fillblank input issue, when you have to click twice in input area to be able to write in it. I did not see solution for that. Any idea? 2. If I enable the in-course quiz, then all the fillblank input line is in the middle of the row... but only in in-course quiz. 3. In the in-course quiz, there is an overlapping of elements under the quiz timer.

[Anshuman Sahu]

Hi please provide us some time to retain the formatting .

[Anshuman Sahu]

Please ping back for reminder . BTW this is not the dead end we have old quizzes in which it works . Trying to be honest cant promise we will make the html thing work but yes we can find a way to add line break .

[szabonyelviskola]

I will give you time, especially if you solve the problem somehow. I can not do anything. But you should know that first sentence regarding this problem was written on this forum more than 2 weeks ago... My client is angry, she should start the midterm exams at the beginning of September... But with this wrong layout, she does not allow me to start the system. For me is very important to find a good working solution till 1st September. If you can not finish with react reworking part I will start with old not react quiz, but please solve the above 3 problems on that old part quickly:

1. Why have to click twice in the input area to be able to write in it. I did not see any solution to that. Any idea? (Tab or 1 click would be fine)

2. If I enable the in-course quiz, then all the fillblank input line is in the middle of the row… but only in in-course quiz. This is the biggest problem!!! (I need in-course quiz because the client want more questions/page)

3. In the in-course quiz, there is an overlapping of elements under the quiz timer. (default course status screen.) This is also very annoying, You could not see the progress in the quiz, because the test charts are overlapping this area. Please give me some hints, how to avoid these problems, to be able to use the old system without problems, till you rewrite, rethink the react formatting problem minimum for plain text + line breaks.

[Anshuman Sahu]

1. this is bug , and that can be fixed by directly modifying the php shortcode . 2 . this can be fixed with little css. 3 . ok we will check this too please share some screenshot . Please also share your site url and admin credentials to fix all three issues in your site .

[Author]

Posts