Embedding programming code in choices

  • billjojo

    (@billjojo)


    2 years, 7 months ago

    Hey Dan! Me again!

    I would like to embed source code into the question choices. I was looking through the source code to see how tags were being handled and was wondering if maybe introducing something like an [ec][/ec] pair for encoded content so that everything between the tags is base64 encoded.

    I am using prism.js for the source code embedding. This works in Qwizcards as content to be displayed to the student before the choices are displayed, but not when embedded.

    Here is a sample test page I was using.

    <h3 id="quiz1">Quiz 1</h3>

This is both the question and the first answer:

<pre class="language-java"><code>for ( int i = 1; i <= 10; i++ )
  ia[i] = i * 3;</code></pre>

[qwiz repeat_incorrect="false" random="true"]
[h]Arrays
[i]Answer all the questions by selecting the best possible answer.

[q multiple_choice="true"]Below is also the first answer:

<pre class="language-java"><code>for ( int i = 1; i <= 10; i++ )
  ia[i] = i * 3;</code></pre>

[c]<pre class="language-java"><code>for ( int i = 1; i <= 10; i++ )
  ia[i] = i * 3;</code></pre>

[c]<pre class="language-java"><code>for ( int i = 1; i < 11; i++ )
  ia[i] = i * 3;</code></pre>

[c*]<pre class="language-java"><code>for ( int i = 0; i < 10; i++ )
  ia[i] = i * 3;</code></pre>

[c]<pre class="language-java"><code>for ( int i = 0; i <= 10; i++ )
  ia[i] = i * 3;</code></pre>
[fx]no

[x]The quiz is now complete. Click the button below to repeat this quiz.
[restart]
[/qwiz]
    • This topic was modified 2 years, 7 months ago by billjojo.
    • This topic was modified 2 years, 7 months ago by billjojo.
Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Dan Kirshner

    (@dan-kirshner)

    2 years, 7 months ago

    Hello:

    I assume you’re using a plugin for prism.js. Can you tell me which one, just so I test things with something relevant?

    Usually these things are a case something like this: prism.js expects the pre class=”language-java” (for example) tags to be present when the page finishes loading, so it can find them and process their contents. But Qwizcards generally waits till later to display things. This has been an issue, for example, with audio and video players.

    The general solution has been to prompt the plugin or player to initialize AFTER Qwizcards has displayed things. So let me see what I can do in this case.

    I’m not sure what you want to do with the base64 encoding. Is it irrelevant in light of this info?

    Thanks! –Dan

    Plugin Author Dan Kirshner

    (@dan-kirshner)

    2 years, 7 months ago

    Hello again:

    I used the “prismatic” plugin, which lets one switch between prism.js and highlight.js.

    I’ve found initialization functions associated with each of these highlighters, so I can reinitialize when the code blocks are loaded by Qwizcards.

    Updated version released in a day or so, I hope…

    Thread Starter billjojo

    (@billjojo)

    2 years, 7 months ago

    Dan,
    Apologies for the delay. Got called away on another project.

    I am adding prism.js directly through my theme with:

    function add_prism()
{
    wp_enqueue_style( 'prism-css',  get_stylesheet_directory_uri() . '/prism.css' );
    wp_enqueue_script( 'prism-js',  get_stylesheet_directory_uri() . '/prism.js', [], false, true );
}
add_action( 'wp_enqueue_scripts', 'add_prism' );

    I may have made a bad assumption with the Base64 encoding. When I look at the page source, this is what I see:

    [c]Cg==<pre class="language-java"><code>Zm9yICggaW50IGkgPSAxOyBpIA==<= 10; i++ )
  ia[i] = i * 3;</code></pre>Cg==[Qq][c]<code>Zm9yICggaW50IGkgPSAxOyBpIA==< 11; i++ )
  ia[i] = i * 3;</code></p>Cg==[Qq][c]<code>Zm9yICggaW50IG kgPSAwOyBpIA==< 10; i++ )
  ia[i] = i * 3;</code></p>Cg==[Qq][c]<code>Zm9yICggaW50IGkgPSAwOyBpIA==<= 10; i++ )
  ia[i] = i * 3;</code><br />CltmeF1ubw==</p>Cg==[Qq][x]The quiz is now complete. Click the button below to repeat this quiz.<br />

    I had assumed the plugin was producing the encoding (based on reading through the plugin source – which is rather voluminous! 🙂 ) when you are scanning the question text there are calls to base64_encode.

    Thank you for the update!

    Bill

    • This reply was modified 2 years, 7 months ago by billjojo.
    Thread Starter billjojo

    (@billjojo)

    2 years, 7 months ago

    Dan,

    I tried out Prismatic. Unfortunately it does not have all the pieces I need for my site. I have a customized Prism.js from their site plus some CSS I have added for formatting based on my textbook needs.

    I am also guilty in forgetting to escape all of my less-than and ampersands (like the docs say to!), so I have some personal cleanup I need to do throughout my site. (Ugh!)

    If need be, I could resort to simply pre tags, but I would prefer the colorization in the choices. 🙂

    Thank you for everything!
    Bill

    Plugin Author Dan Kirshner

    (@dan-kirshner)

    2 years, 7 months ago

    Hi Bill:

    Hopefully what I’ve done doesn’t depend on the prismatic plugin — it just brings in (vanilla) prism. Please try new Qwizcards version 3.60!

    The encoding occurs because I got tired of (smart!) students saying, “I can see the answers by clicking ‘View Page Source'” — just trying to make it a bit more difficult for them (and hopefully they’re not reading this!). The encoding is another reason that prism has to be re-initialized at a time later than the page load.
    –Dan

    Thread Starter billjojo

    (@billjojo)

    2 years, 7 months ago

    Dan,

    This looks better! Again, apologies for the delay, been swamped with writing projects.

    If you look here: My Qwiz Test You will see that it is nearly perfect. The only issue right now is it does not preset line breaks. All of the answers would look like the top two.

    Thank you so much for your attention to this. My students love the embedded quizzes and you have been so responsive to my requests!

    Bill

    Plugin Author Dan Kirshner

    (@dan-kirshner)

    2 years, 7 months ago

    Thanks, Bill. I’m not quite sure what you mean by “does not preset line breaks”. Is it that the radio button is not on the same line as the code choices? I was able to have the code snippet inline with the radio button by leaving out the “pre” tag, and just using a code tag with class=”language-java”

    –Dan

    Thread Starter billjojo

    (@billjojo)

    2 years, 7 months ago

    Dan,

    Oh, typo, my bad. I removed the pre tag and that does look much better!

    There are intentional line breaks in the choices, but without tags. The link will show a sample of how my book is written. The top (Test) is a sample bit of code displayed by PrismJS.

    Then in the Qwizcards example I show the question and the same code format for each choice. The choices are multiline answers that match the top two versions, but they are displaying flat and all on one line.

    I love the way this coming together and I think the line breaks in choices are the last piece.

    Thank you so much for your patience!

    Bill

    Plugin Author Dan Kirshner

    (@dan-kirshner)

    2 years, 7 months ago

    Hi Bill. Ah, of course. With some persistence (or maybe it’s OCD) this seems to work nicely: Continue to leave out the pre tag. Add to the code tag, style=”white-space: pre; vertical-align: top;” At least it worked for me on a couple of test sites!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Embedding programming code in choices’ is closed to new replies.