Difference between revisions of "Widget: Katacoda"
From Genesys Documentation
(Created page with "<noinclude> This widget allows you to add an embedded Katacoda course to your wiki page. == Using this widget == To use this widget, take the course number and plug into into...") |
|||
| Line 1: | Line 1: | ||
<noinclude> | <noinclude> | ||
| − | This widget allows you to add an embedded Katacoda course | + | This widget allows you to add an embedded Katacoda course into your Wiki page. Katacoda is an opensource learning platform, which provides scripts to embed the terminal in our own pages. |
== Using this widget == | == Using this widget == | ||
| − | To use this widget, | + | To use this widget, include the course number into the #widget parser syntax as the data-katacoda-id parameter. |
| − | + | Here is a sample #widget syntax: | |
<pre> | <pre> | ||
{{#widget:Katacoda|divid=myScenario|scenario=docker/deploying-first-container}} | {{#widget:Katacoda|divid=myScenario|scenario=docker/deploying-first-container}} | ||
</pre> | </pre> | ||
| − | + | Result: | |
<pre> | <pre> | ||
<p class="katacoda-caption><script src="//katacoda.com/embed.js"></script></p> | <p class="katacoda-caption><script src="//katacoda.com/embed.js"></script></p> | ||
| Line 16: | Line 16: | ||
</pre> | </pre> | ||
| − | + | Available Parameters: | |
| − | * scenario | + | * scenario (mandatory): Katacoda scenario ID (including username and scenario name) |
| − | * divid | + | * divid (optional): Unique ID for the div containing your Katacoda scenario; defaults to value of the scenario parameter |
| − | * height | + | * height (optional): Height for the div containing your Katacoda scenario; defaults to 600px |
<!-- | <!-- | ||
| − | * | + | * Caption (optional): Caption preceding Katacoda div; you can define the style separately |
| − | * | + | * Color (optional): Hex value passed to Katacoda; defaults to 004d7f |
| − | * | + | * Padding (optional): Top padding for the div containing your Katacoda scenario; defaults to 0px |
--> | --> | ||
| − | == | + | == Using the widget == |
| − | To use this widget on your site, | + | To use this widget on your site, install [https://www.mediawiki.org/wiki/Extension:Widgets MediaWiki Widgets extension] and the copy [{{fullurl:{{FULLPAGENAME}}|action=edit}} full source code] of this page to your wiki, as an article called '''{{FULLPAGENAME}}'''. |
</noinclude> | </noinclude> | ||
<includeonly><p class="katacoda-caption"><!--{$caption|escape:'html'}--><script src="//katacoda.com/embed.js"></script></p><div id="<!--{$divid|escape:'html'|default:$scenario}-->" data-katacoda-id="<!--{$scenario|escape:'html'}-->" data-katacoda-color="<!--{$color|escape:'html'|default:'004d7f'}-->" style="height: <!--{$height|escape:'html'|default:'600px'}-->; padding-top: <!--{$padding|escape:'html'|default:'0px'}-->;"></div></includeonly> | <includeonly><p class="katacoda-caption"><!--{$caption|escape:'html'}--><script src="//katacoda.com/embed.js"></script></p><div id="<!--{$divid|escape:'html'|default:$scenario}-->" data-katacoda-id="<!--{$scenario|escape:'html'}-->" data-katacoda-color="<!--{$color|escape:'html'|default:'004d7f'}-->" style="height: <!--{$height|escape:'html'|default:'600px'}-->; padding-top: <!--{$padding|escape:'html'|default:'0px'}-->;"></div></includeonly> | ||
Revision as of 15:53, April 8, 2019
This widget allows you to add an embedded Katacoda course into your Wiki page. Katacoda is an opensource learning platform, which provides scripts to embed the terminal in our own pages.
Using this widget[edit source]
To use this widget, include the course number into the #widget parser syntax as the data-katacoda-id parameter.
Here is a sample #widget syntax:
{{#widget:Katacoda|divid=myScenario|scenario=docker/deploying-first-container}}
Result:
<p class="katacoda-caption><script src="//katacoda.com/embed.js"></script></p> <div id="myScenario" data-katacoda-id="docker/deploying-first-container" data-katacoda-color="004d7f" style="height: 600px; padding-top: 0px;"></div>
Available Parameters:
- scenario (mandatory): Katacoda scenario ID (including username and scenario name)
- divid (optional): Unique ID for the div containing your Katacoda scenario; defaults to value of the scenario parameter
- height (optional): Height for the div containing your Katacoda scenario; defaults to 600px
Using the widget[edit source]
To use this widget on your site, install MediaWiki Widgets extension and the copy full source code of this page to your wiki, as an article called Widget:Katacoda.