Below, you’ll find a detailed guide on how to add the Interact: Embed A Quiz On Your Site Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Interact: Embed A Quiz On Your Site Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the Interact: Embed A Quiz On Your Site Plugin and the shortcodes it provides:
"Interact: Embed A Quiz On Your Site is a user-friendly plugin that allows you to effortlessly embed interactive quizzes on your WordPress site, enhancing user engagement and learning."
- [interact-quiz]
- [interact_embed]
Interact [interact-quiz] Shortcode
The Interact Quiz Embed shortcode allows embedding interactive quizzes in your WordPress posts. The shortcode takes parameters for user, id, width, and height. The user parameter specifies the username of the quiz creator. The id parameter is the unique identifier for the quiz. Width and height parameters customize the size of the embedded quiz. If no size is specified, the default is set to 600×500 pixels. When the user parameter is set, the shortcode returns an iframe embedding the specified user’s quiz. If no user is specified, it embeds a quiz using the supplied id.
Shortcode: [interact-quiz]
Parameters
Here is a list of all possible interact-quiz shortcode parameters and attributes:
user– the username associated with the quizid– the unique identifier of the quizw– sets the width of the quiz iframeh– sets the height of the quiz iframe
Examples and Usage
Basic example – Embeds an Interact Quiz using the user’s username and the quiz id.
[interact-quiz user="johndoe" id="12345" /]Advanced examples
Embeds an Interact Quiz with a custom width and height. The width and height are specified in pixels.
[interact-quiz user="johndoe" id="12345" w="800" h="600" /]Embeds an Interact Quiz without a specified user. The shortcode will instead use the app id to display the quiz.
[interact-quiz id="app12345" /]Embeds an Interact Quiz without a specified user but with a custom width and height.
[interact-quiz id="app12345" w="800" h="600" /]PHP Function Code
In case you have difficulties debugging what causing issues with [interact-quiz] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('interact-quiz','interact_quiz_embed');Shortcode PHP function:
function interact_quiz_embed($atts) {
shortcode_atts(array('user'=>'', 'id'=>'', 'w'=>'600', 'h'=>'500'), $atts);
if(isset($atts['w']))
$width = $atts['w'];
else
$width = '600';
if(isset($atts['h']))
$height = $atts['h'];
else
$height = '500';
if (isset($atts['user'])) {
$username = $atts['user'];
$id = $atts['id'];
return '
<link rel="stylesheet" type="text/css" href="https://www.tryinteract.com/css/interact.css">
<iframe src="https://quiz.tryinteract.com/#/'.$username.'/'.$id.'" class="interact-embed" width="'.$width.'" height="'.$height.'" frameborder="0"></iframe>
';
} else {
$app_id = $atts['id'];
return '<iframe src="https://quiz.tryinteract.com/#/'.$app_id.'" class="interact-embed" width="'.$width.'" height="'.$height.'" frameborder="0" style="margin:0;max-width:100%;"></iframe>';
}
}
Code file location:
interact-quiz-embed/interact-quiz-embed/interact-quiz-embed.phpInteract [interact_embed] Shortcode
The Interact Quiz Embed shortcode allows you to embed quizzes in your posts. It offers customization options including size, cover, mobile compatibility, and alignment. The PHP code for this shortcode uses various parameters (id, type, width, height, no cover, mobile, align, redirect) to customize the quiz display. It generates a unique reference for each quiz and uses JavaScript to initialize and display the quiz.
Shortcode: [interact_embed]
Parameters
Here is a list of all possible interact_embed shortcode parameters and attributes:
id– Unique identifier for the interact quiz embed.type– Determines the type of embed, default is ‘quiz’.w– Sets the width of the embed, default is ‘800’.h– Defines the height of the embed, default is ‘800’.no_cover– If set to ‘true’, it hides the cover; default is ‘false’.mobile– If ‘true’, allows mobile responsiveness; default is ‘true’.align– Aligns the embed to the stated position; no default set.redirect– If set to ‘host’, enables redirect to host; default is ‘false’.
Examples and Usage
Basic example – Embeds an Interact Quiz with default parameters.
[interact id="12345"]Advanced examples
Embeds an Interact Quiz with specified width and height.
[interact id="12345" w="500" h="600"]Embeds an Interact Quiz without a cover, and with a specified alignment.
[interact id="12345" no_cover="true" align="center"]Embeds an Interact Quiz with specific mobile and redirect settings.
[interact id="12345" mobile="false" redirect="host"]Embeds an Interact Quiz with all available parameters specified.
[interact id="12345" type="poll" w="500" h="600" no_cover="true" mobile="false" align="center" redirect="host"]PHP Function Code
In case you have difficulties debugging what causing issues with [interact_embed] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('interact','interact_embed');Shortcode PHP function:
function interact_embed($atts) {
shortcode_atts(array('id'=>'', 'type'=>'quiz', 'w'=>'800', 'h'=>'800', 'no_cover'=>'false'), $atts);
wp_enqueue_script('interact-embed-script');
if(isset($atts['w'])) { $width = $atts['w']; } else { $width = '800'; }
if(isset($atts['h'])) { $height = $atts['h']; } else { $height = '800'; }
if(isset($atts['type'])) { $type = $atts['type']; } else { $type = 'quiz'; }
if(isset($atts['no_cover'])) { $no_cover = 'true'; } else { $no_cover = 'false'; }
if(isset($atts['mobile'])) { $mobile = $atts['mobile']; } else { $mobile = 'true'; }
if(isset($atts['align'])) { $align = $atts['align']; } else { $align = null; }
if(isset($atts['redirect'])) { $redirect = $atts['redirect']; } else { $redirect = 'false'; }
$app_id = $atts['id'];
$ref = $app_id . md5($app_id . rand());
if($align) {
$align = 'style="text-align:' . $align . ';"';
}
$container = '<div id="interact-' . $ref . '"' . $align . '></div>';
return '
' . $container . '
<script type="text/javascript">
(function(){
window.addEventListener("load", function(){
var app_id = "' . $app_id . '";
var ref = "' . $ref . '";
var w = "' . $width . '";
var h = "' . $height . '";
var host = "' . $type . '.tryinteract.com";
var no_cover = ' . $no_cover . ';
var mobile = ' . $mobile . ';
var redirect = "' . $redirect . '";
var params = { "ref":ref, "appId": app_id, "width":w, "height":h, "async":true, "host":host, "auto_resize":true, "mobile":mobile, "no_cover":no_cover };
if(redirect === "host") {
params.redirect_host = true;
}
window[ref] = new InteractApp();
window[ref].initialize(params);
window[ref].display();
});
})(window);
</script>
';
}
Code file location:
interact-quiz-embed/interact-quiz-embed/interact-quiz-embed.phpConclusion
Now that you’ve learned how to embed the Interact: Embed A Quiz On Your Site Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply