Intro
Sometimes you want to give your students a problem to work on, but don’t want to take it for a grade. Maybe you’re putting together a page in Canvas explaining how loops work and want to give them a couple of loop problems to play with. Or maybe you want to put a problem into the discussion board and have your students solve and then talk about the problem.
Fortunately, Canvas makes that very easy.
Setup
If you haven’t already, you’ll need to add ClassCube as an app in Canvas for your course. If you’ve already been ClassCube for assignments then you’ve already done this. If not, follow the link and get it setup. We’ll wait here for you when you get back.
Embedding the Problem
For this example we’re going to embed a problem into a discussion post, but the same process works for pages in Canvas. Go ahead and create a new discussion post.
Once you’re on the post creation page you should see the rich text editor where you would typically type your post. You can type in whatever you want here. It won’t affect the embedding. Maybe something like a quick intro for your students.
You should see a small cube icon in the rich text editor toolbar. It’ll look like the image below. The cube is right next to Pi. A couple of reasons why you might not see it. First, Canvas has a limit to how many icons can be added to the rich text editor. If you have other apps loaded that add their own icons, ClassCube might have gotten pushed down. In that case you should see a small down arrow that will display the entire list. The second reason is that you haven’t setup ClassCube as an app for your course yet.
Click on the ClassCube icon and Canvas will bring up a dialog that looks like this.
This is a list of up to 25 assignments that you’ve created in ClassCube. If you’ve created more than 25 you can search if you’ve already got an assignment created. If you find what you’re looking for here, click the Select button and it will embed that assignment into your page.
The other option, and the one that I assume you’re more likely to take, is to use the Add Assignment tab and create a new assignment. Click on that tab and you should see a dialog like this.
With this you’ll be able to create a new assignment for a problem without ever leaving Canvas.
| Field | Notes |
|---|---|
| Assignment Name | This is the assignment name used in ClassCube. It won’t show up anywhere in Canvas except when you pop up lists like the screen you’re looking at now. Since we’re doing a demo, something like Demo Problem would work, but it’s up to you. |
| Problem | This is a searchable dropdown where you’ll see a list of all the problems you have access to. Pick the one that you want. If you find one, but don’t quite remember what it is there’s a small eye icon to the right of the dropdown that will pull up the complete problem description. |
| Description | The short description, if available, for the selected problem. This is just informational and not something you can edit here. |
| Open / Close Date | You can limit the dates for your students to attempt this problem by entering dates here. You can also leave one or both blank if you don’t want to limit. |
Once you’re happy with the settings click Create Assignment. Your server will connect with our server and create the assignment and then embed an iframe into your page that looks like this.
You’re not going to see the problem yet. The rich text editor in Canvas just shows a placeholder for an iframe.
Advanced Settings
By default the iframe created is 100% width and 300 pixels tall. If you’d like to change the size you can do so by clicking on the HTML editor link above the editor. You do need to be a bit comfortable editing HTML.
Done
Click on Save or Save and Publish and you should see your post.
Troubleshooting
No Grades
That’s correct. There’s not a grade associated with this since it’s embedded. If you want to make an assignment show up as a grade in the Canvas gradebook it will need to be done as an assignment.
Problem doesn’t load
If the problem doesn’t load it’s most likely an issue with your domain keys. Most of the time if the key and secret don’t match the iframe will have your course embedded in the iframe. The fix is to double check that you’ve entered the right keys for your site.
Doesn’t work when copying
One catch to how this works is that the iframe src includes the Canvas course number. If you copy your page over to another course it won’t match. Easiest fix is to delete the iframe from the content in the new course and re-embed the problem
The other option is to manually edit the HTML for the page. Click on the HTML Editor link above the editor. You’re looking for the src attribute in the iframe. It should be something like this. /courses/4/external_tools/retrieve?borderless=1&url=https://app.classcube.com/p/XXX/YYY/ . Right after where it says courses is a 4, although yours probably won’t be a 4. Change that to whatever the new course number is.