Difference between revisions of "IframeEmbedding1"
Jump to navigation
Jump to search
Paultpearson (talk | contribs) (New iframe embedding example) |
(add historical tag and give links to newer problems.) |
||
| (7 intermediate revisions by one other user not shown) | |||
| Line 1: | Line 1: | ||
| + | {{historical}} |
||
| + | |||
| + | <p style="font-size: 120%;font-weight:bold">This problem has been replaced with [https://openwebwork.github.io/pg-docs/sample-problems/Misc/IframeEmbedding.html a newer version of this problem]</p> |
||
| + | |||
| + | |||
<h2>HTML iframe Embedded Content</h2> |
<h2>HTML iframe Embedded Content</h2> |
||
[[File:IframeEmbedding1.png|300px|thumb|right|Click to enlarge]] |
[[File:IframeEmbedding1.png|300px|thumb|right|Click to enlarge]] |
||
<p style="background-color:#f9f9f9;border:black solid 1px;padding:3px;"> |
<p style="background-color:#f9f9f9;border:black solid 1px;padding:3px;"> |
||
| − | This PG code shows how to embed content using an <code>iframe</code> in html. |
+ | This PG code shows how to embed content such as a Google slide show or a YouTube video using an <code>iframe</code> in html. |
</p> |
</p> |
||
| − | * Download file: [[File:IframeEmbedding1.txt]] (change the file extension from txt to pg when you save it) |
||
| + | * File location in OPL: [https://github.com/openwebwork/webwork-open-problem-library/blob/master/OpenProblemLibrary/FortLewis/Authoring/Templates/Misc/IframeEmbedding1.pg FortLewis/Authoring/Templates/Misc/IframeEmbedding1.pg] |
||
| − | * File location in NPL: <code>FortLewis/Authoring/Templates/Misc/IframeEmbedding1.pg</code> |
||
| + | * PGML location in OPL: [https://github.com/openwebwork/webwork-open-problem-library/blob/master/OpenProblemLibrary/FortLewis/Authoring/Templates/Misc/IframeEmbedding1_PGML.pg FortLewis/Authoring/Templates/Misc/IframeEmbedding1_PGML.pg] |
||
<br clear="all" /> |
<br clear="all" /> |
||
| Line 68: | Line 73: | ||
$slideshow = MODES( |
$slideshow = MODES( |
||
HTML=> |
HTML=> |
||
| − | "<iframe src='https://docs.google.com/presentation/d/1pk0FxsamBuZsVh1WGGmHGEb5AlfC68KUlz7zRRIYAUg/embed#slide=id.i0' |
+ | "<iframe src='https://docs.google.com/presentation/d/1pk0FxsamBuZsVh1WGGmHGEb5AlfC68KUlz7zRRIYAUg/embed#slide=id.i0' |
| + | frameborder='0' width='555' height='451'></iframe>", |
||
TeX => |
TeX => |
||
"An embedded Google slide show." |
"An embedded Google slide show." |
||
); |
); |
||
| + | $video = MODES( |
||
| + | HTML=> |
||
| + | '<iframe width="420" height="315" src="//www.youtube.com/embed/NpDXXjClErk" |
||
| + | frameborder="0" allowfullscreen></iframe>', |
||
| + | TeX => |
||
| + | "An embedded YouTube video." |
||
| + | ); |
||
</pre> |
</pre> |
||
</td> |
</td> |
||
| Line 78: | Line 90: | ||
<p> |
<p> |
||
<b>Setup:</b> |
<b>Setup:</b> |
||
| − | We create a mode dependent variable <code>$slideshow</code> that displays a Google slideshow inside an html <code>iframe</code> when in html mode, and the message "An embedded Google slide show." in TeX mode. If you omit the TeX mode stuff, then there will be errors when the pdf hardcopy is generated. |
+ | We create a mode dependent variable <code>$slideshow</code> that displays a Google slideshow inside an html <code>iframe</code> when in html mode, and the message "An embedded Google slide show." in TeX mode. If you omit the TeX mode stuff, then there will be errors when the pdf hardcopy is generated. Similarly for the <code>$video</code>. (Searching the web for "YouTube embed video" should bring up instructions for how to get the code to embed a YouTube video into a webpage.) |
</p> |
</p> |
||
</td> |
</td> |
||
| Line 92: | Line 104: | ||
${BCENTER} |
${BCENTER} |
||
$slideshow |
$slideshow |
||
| + | $BR |
||
| + | Google slides embedded using an iframe. |
||
| + | $BR |
||
| + | $BR |
||
| + | $video |
||
| + | $BR |
||
| + | YouTube video of Arthur Benjamin, mathemagician, embedded using an iframe. |
||
| + | $BR |
||
| + | If the video does not work, |
||
| + | \{ htmlLink("http://www.youtube.com/embed/NpDXXjClErk", |
||
| + | "click here to go to YouTube directly.") \} |
||
${ECENTER} |
${ECENTER} |
||
END_TEXT |
END_TEXT |
||
| Line 99: | Line 122: | ||
<p> |
<p> |
||
<b>Main Text:</b> |
<b>Main Text:</b> |
||
| + | Include the <code>$slideshow</code> wherever you like. |
||
</p> |
</p> |
||
</td> |
</td> |
||
Latest revision as of 06:41, 17 July 2023
This problem has been replaced with a newer version of this problem
HTML iframe Embedded Content
This PG code shows how to embed content such as a Google slide show or a YouTube video using an iframe in html.
- File location in OPL: FortLewis/Authoring/Templates/Misc/IframeEmbedding1.pg
- PGML location in OPL: FortLewis/Authoring/Templates/Misc/IframeEmbedding1_PGML.pg
| PG problem file | Explanation |
|---|---|
|
Problem tagging: |
|
DOCUMENT(); loadMacros( "PGstandard.pl", "MathObjects.pl", "AnswerFormatHelp.pl", "PGcourse.pl", ); TEXT(beginproblem()); |
Initialization: |
Context("Numeric");
$slideshow = MODES(
HTML=>
"<iframe src='https://docs.google.com/presentation/d/1pk0FxsamBuZsVh1WGGmHGEb5AlfC68KUlz7zRRIYAUg/embed#slide=id.i0'
frameborder='0' width='555' height='451'></iframe>",
TeX =>
"An embedded Google slide show."
);
$video = MODES(
HTML=>
'<iframe width="420" height="315" src="//www.youtube.com/embed/NpDXXjClErk"
frameborder="0" allowfullscreen></iframe>',
TeX =>
"An embedded YouTube video."
);
|
Setup:
We create a mode dependent variable |
Context()->texStrings;
BEGIN_TEXT
${BCENTER}
$slideshow
$BR
Google slides embedded using an iframe.
$BR
$BR
$video
$BR
YouTube video of Arthur Benjamin, mathemagician, embedded using an iframe.
$BR
If the video does not work,
\{ htmlLink("http://www.youtube.com/embed/NpDXXjClErk",
"click here to go to YouTube directly.") \}
${ECENTER}
END_TEXT
Context()->normalStrings;
|
Main Text:
Include the |
$showPartialCorrectAnswers = 1; |
Answer Evaluation: |
Context()->texStrings;
BEGIN_SOLUTION
${PAR}SOLUTION:${PAR}
Solution explanation goes here.
END_SOLUTION
Context()->normalStrings;
COMMENT('MathObject version.');
ENDDOCUMENT();
|
Solution: |
