Embeds
Drive an embed from your page
An embed can talk to the page around it. Your scripts tell it what to do, and it tells them what happened.
This works on every embed. There is nothing to enable, and no setting to save. You write a little JavaScript in your own page, and the Get embedding code dialog can write that JavaScript for you.
Most pages need none of this. A course that reacts to what a reader did needs all of it.
Getting the code
Choose Get embedding code. The snippet is two lines: a div that names your
embed, and the script that fills it in.
<body>
<div data-pym-src="https://www.jdoodle.com/embed/v1/your_embed_key"></div>
<script src="https://www.jdoodle.com/assets/jdoodle-pym.min.js" type="text/javascript"></script>
</body>Copy puts it on your clipboard. Download HTML saves a complete page with the embed already in it, which is the quickest way to see it working before you put it in your own site.
The checkboxes write code, they do not save settings
This is the part that confuses people, so it is worth being plain about.
Every embed can already do all of this. The commands and events below are part of how embeds work, not features you switch on. Nothing in this dialog is saved to your embed.
What the checkboxes do is write the JavaScript for you. Tick a command and the snippet grows to include the code that sends it. Tick nothing and you get the plain two lines.
Three things follow from that:
- You can come back any time. Open the dialog again, tick something else, and take a new snippet. Your embed has not changed.
- Ticking a box changes nothing already on your page. The code lives in the snippet you pasted, so you have to copy the new one over.
- You can write it yourself. The generated code is a starting point. If you already know the messages, you do not need this dialog at all.
These are the messages available to you.
Your page tells the embed to
| Command | What it does |
|---|---|
| Get Code and Set Code | Read what the reader wrote, or replace it |
| Clear Code Editor | Empty the editor |
| Execute and Stop Execution | Run the program, or stop it |
| Get Language List and Set Language | Read what is available, or change it |
| Get Version List and Set Version | The same for versions |
| Get and Set Interactive Mode | Whether the reader is asked for input |
| Get and Set STDIN | The text the program reads |
| Get and Set Input Arguments | Command-line arguments |
| Get Output | Read the result |
| Clear Output Editor | Empty the output |
| Post to JDoodle | Send the current code to JDoodle |
The embed tells your page
- Receive code when the program is changed by the user. You are given the program whenever the reader edits it.
- Receive output when the program is executed. You are given the output when a run finishes.
- Receive status when the embed is ready to listen for events. The embed says when it can accept messages.
That last one matters more than it looks. Sending an instruction before the embed is ready is the usual reason a page appears to be ignored.
What this makes possible
A course that follows along
Load each step's code as the reader reaches it, and clear the output between steps.
Good for a lesson where the code changes as the material does.
Checking their work
Read the output when a reader runs something, and respond in your own page.
Good for exercises with a right answer, and progress you want to record.
What next
If you only want to send code to JDoodle rather than run it in your page, posting code to JDoodle does that with an HTML form and no scripting at all.