Transform Rule for SlickQuiz

Steps required to reproduce the problem

1. No rules defined for
   in the context of InstantArticle

3. Expected Result

   I wanted to learn how to allow the quiz from slickquiz to be shown in my instant article post.

   Actual Result

   If your issue is about the error message No rules defined for .... Please do the following.

   • Go to the Wordpress editor and open the post
   • In the Instant Article plugin section click on [Toggle debug information]
   • Share both Source Markup and Transformed Markup

   Version Info

   Please state exact versions, not latest or new.

   • Plugin version: Version 4.0.6
   • WordPress version: Version 4.9.4
   • PHP version: 5.4.24

   Without the above information we are not able to debug the issue and will close it.

[moyanerd]

Anyone know how to add a quiz to work with instant articles?

[pestevez]

Hey @moyanerd. For anything related to missing rules please refer to the Frequently Asked Questions section of the readme file.

Also, the description of your issue still has some of the information from the New Issue template that has a description of the steps you need to take and the information you need to provide for us to be able to help.

Finally, since this issue is related to third-party compatibility I also suggest you seek for help at the Instant Articles Open Source FB Group.

[moyanerd]

Thank you for replying. I tried to join the Facebook Instant Articles group but my request to join group was never accepted. This is what I get as a markup from the slickquiz plugin. I don't know much about coding but would appreciate it if you could guide me in creating a rule for this plugin or for any plugin. Unless you know of a quiz plugin that works with instant articles with out having to create a rule, I'll use that one. Thank you.

                        <div class="quizArea">
                            <div class="quizHeader">
                                <div class="buttonWrapper">Get Started!</div>
                            </div>
                        </div>

                        <div class="quizResults">
                            <div class="quizResultsCopy">
                                <h3 class="quizScore">Your Score: <span>&nbsp;</span></h3>
                                <h3 class="quizLevel">Your Ranking: <span>&nbsp;</span></h3>
                                <div class="quizShare"></div>
                            </div>
                        </div>
                    </div>

[jerclarke]

@moyanerd There is no way you could use Transformations to convert this code into Instant Article-safe HTML. It's impossible to have any kind of custom <div> in Instant Articles, and even less possible to have a <h3> in anything but the root of the document (i.e. you couldn't even have blockquote>h3 or something similar that would "simulate" the div).

On top of that, even if you did manage to convert the HTML, the result would be a useless mix of text with no utility.

Almost certainly, your only option is for the plugin to have an <iframe> version of it's code, and to output that rather than the HTML when rendering an Instant Article (or to embed the quiz as an iframe, rather than as HTML, in all versions of the post). Doing this would be incredibly elaborate and time-consuming and almost certainly require a ton of effort by the plugin creator, though theoretically you could do it yourself.

Iframes are the only way to have any kind of interactive element that isn't 100% defined by Facebook, so this will apply to all plugins. Unfortunately almost no plugins have added IA support, so you probably won't find one that has gone through the effort of this setup. Your best bet to get quizzes into IA would be to switch to something that is 100% iframe embed based, and use that rather than a WP plugin.

IA docs about embeds, which describe the iframe system

My recommendation: Accept that your posts with this quiz will not render as IA, allow them to show the error in the IA metabox and make sure they work well in the mobile version of your site. Focus on making sure all your other posts, without this interactive element, validate correctly as IA.

[moyanerd]

Thank you for your response. This helps. Now I know how to look for a plugin that will help me and to not count on the ones that do not use iframe.

[diegoquinteiro]

@jerclarke thanks for the comprehensive explanation.

@moyanerd we have also included a convenience on our transformation engine: if you wrap any content on your markup with <div class="embed">...</div> our plugin will put this content inside an iframe.

But if your article is composed only by the quiz, it's better to simply render it as mobile web.

[robbiet480]

Sorry to jump onto this issue, but i've also been waiting to be accepted to the Facebook Group for months now without success. My Facebook account is at https://facebook.com/robbiet if needed. Again, apologies for using this issue but i've reached out privately to the group admins and none of them have responded to me for a full week now.

@pestevez

[github-actions[bot]]

This issue has been marked stale because it has been open for 30 days with no activity. If there is no activity within 7 days, it will be closed. This is an automation to keep issues manageable and actionable and is not a comment on the quality of this issue nor on the work done so far. Closed issues are still valuable to the project and are available to be searched.