I have tried embedding the stripped down version of a Desmos Graph in a quiz question. I am loading the javascript file as addtional html and it appears to be included in the head.
The embedding works fine on the front page, on the course page, on a quiz description, but nothing appears in a quiz question.
Moodle 2.8.1
Just running localhost on a bitnami stack
The possibility of embedding Desmos in a configurable way opens up a realm of possibilities I am just beginning to appreciate now.
I checked and it will show in a description question, but not in a multiple choice, essay or numerical question type.
I am under admin user with and without enable trusted content.
Let me say what an honour it is to have informed the Internet's Definitive Guide on Mathematics about the code.
You do great work.
I made the first quick tests and it worked ok with tiny "restrictions". Following your instructions I added to Additional HTML
<script src="https://www.desmos.com/api/v0.3/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6"></script>
Alright. There is some peculiarity with my installation.
I get the same behaviour with Clean and More, Chrome and Firefox.
The original plan was to generate the div id's uniquely per question to keep the DOM on track.
I will go to the less desirable fall back of embedding an webpage.
Let me know if you find any other obvious things I might be overlooking.
Are there some filters enabled? It would be interesting to create a new plugin and filter for these calculators - or test them with Justin Hunt's Generico filter.
It does seem to mostly work with the Generico filter using @@AUTOID@@ to generate the different numbers for calculator and graph that you mentioned. It may have just been my inexperience but I couldn't always get it to draw the graph reliably. I have been using it in three answers of a multiple choice question. It also may have been due to using the sample public api key. Right now I am waiting for a reply on getting my own api key.
Peculiar. It seems to have a fairly user freindly graphing interface. What seems to happen?
I think I went through the filters (trusted content).
The variability of the result makes me wonder if it could be something like APC rather than Opcache choking on some code when there is a field present.
I just seems a little wonky to work al the way down to a description question but not a question that includes a field of some sort.
Well, after grading some stuff, I just got a chance to play with this some more today. I think the actual graph drawing problem I was having yesterday was probably due to sometimes not remembering to clear the cache between changes to the Generico filter I was making. (Grading real assignments can sometimes be distracting.) It has worked every time today.
I have used a graph in both the question and answers for multiple choice, both the question and answer in an essay question, and in the question part and feedback of a numerical question. They all worked okay, but it was just me and one student account. Tomorrow I will get some of my actual students to all try the simple tests I have made.
The essay question presents some intriguing possibilities. You can have a student create a graph using the Generico filter button in the Atto editor. Unfortunately, I haven't figured out a way for a student to see the result of what they put in an essay answer until they submit the quiz and review.
Glad to see the Generico filter being used here! Perhaps you could post the code or a screenshot of what you have done, so others could replicate it.
That's an excellent point about the result of the filter not being visible to students until after they have submitted the question. Do you think a preview button on the Generico Atto Editor, that opened yet another popup window with the post-filtered result properly displayed, would be useful?
Justin,
a preview button in Atto toolbar (Atto plugin) would be even more useful because it would make previewing of many other problematic things possible. For example content area of editors does not show mathematical notations (tex filter/mathjax), graphs (JSXGraphs, Geogebra,Desmos calculators) and final styles of many html elements. Or filtered content like Generico tags, Multimedia, emoticons etc
See https://moodle.org/mod/forum/discuss.php?d=280473
Can you create such a plugin?
Yeah thats a good idea.
You would just pass the content of the html area to a php page in an iframe. That page would filter the text and display. It might not work for everything (draft area files..?), but it would get the filters working.
I am flat to the floor, pedal to the metal etc on other stuff right now. But I think thats a pretty simple plugin. If I get a chance I will. Otherwise if anyone wants to try, my atto editor template is here, and I will help you out....
https://github.com/justinhunt/moodle-atto_newtemplate
I made an attempt at a preview plugin last night. I don't know if it is what you are looking for. It is not obvious to me what the preview should look like. At the moment it is adding print headers.
Hello Mauno,
Thankyou for testing this. I made a mistake trying to enable the fullscreen plugin which is now fixed. The button now places the preview over the editor window and closes it on a second click. It seems to work really nicely with the fullscreen plugin installed though.
I had not tested inserting the pictures yet. I think that that is fixed now too. I had to fix a mangled link to the draftfile that is saved on Moodle. Pictures can also be inserted as links. This did not seem to need fixing.
Daniel,
it's perfect!
The reason why I changed layout from 'print' to 'popup' was that $PAGE->set_pagelayout('print'); shows all header links but $PAGE->set_pagelayout('popup'); or $PAGE->set_pagelayout('embedded'); do not. The problem with these layouts might be that custom themes (or different versions of moodle) may not use (or have) same layout files. in moodle 2.8 themes like Clean, More or Essential use bootstrapbase as parent theme and bootstrapbase has both popup layout and embedded layout but no layout file called 'print.php'. I wonder do these themes use actually default one column layout if no selected layout is found ?
Great work, Daniel. A good example of how productive open source can be. From forum post to solution in about 2 days.
I tried setting pagelayout to embedded and to popup, but it made no difference. I seem to have run into this before, but I can't recall the solution.
I quite like the iframe inline, though I had anticipated a popup. Perhaps you could make that a setting that could be offered to the site admin to decide from the settings page?
Anyway great job. I can't imagine this shouldn't be in core, once its all stable.
J
Hi Justin,
Thanks. I made a little update. I think that there was a problem with setting the layout before requiring login at least in some themes. Embedded or popup may be better in general, but that may depend on theme or application. I may put in an admin setting just to be safe.
Hi Daniel,
I just installed your current version on github of the Preview button about 30 minutes ago. In a quiz it is working great. If you preview from the question bank it gives a debug message (still works though) like this:
Coding problem: $PAGE->context was not set. You may have forgotten to call require_login() or $PAGE->set_context(). The page may not display correctly as a result
I am using Moodle 2.8.3+ from last week along with the Formal White theme.
Do you see the same result in question preview? I am heading home right now, but later tonight I will try some of the other themes I have on my dev site.
Thanks for the button,
AL
I just tested with multiple themes and got the same debug message in the question preview window.
Almost forgot to mention...I was loading up the essay editor window with desmos graph, chemistry, programming, Tex, and Wiris stuff all at the same time.
Thanks for testing and reporting this. I have called require_login in the preview script. In normal situations this should be adequate. I found in the question display script question/preview.php some code that looks for context to be passed as a parameter and a comment
// Note that in the other cases, require_login will set the correct page context.
Evidently there is some peculiarity with the question preview that needs a work around. However, the preview plugin seems to be working okay in the actual quiz. So it should be usable by students.
I just looked at the equation editor, and it sets context before calling require_login. Apparently that works okay. So I will update it to fix this.
Your latest change fixed the debug problem in question preview mode. Thanks for the prompt fix.
I gave some of my students the chance to play with the Generico Desmos graph filter and your preview button in an essay question today and they had a ball with doing graphs. My eighth graders even got me to make them a "homework" page with the graph and scientific calculator as they are currently working on graphing in Pre-Algebra class.
Hi Justin,
I think a preview button would be an excellent idea for a situation such as this.
The settings I'm using right now are shown in the attached photo. The parts of the filter settings that are not shown, are empty. The first script in the body contains an address URL which I tried in a couple of other places. It worked when placed in the HEAD section of Additional HTML but seemed to work more reliably when I put it in the Generico filter body. I also tried it in the Generico section for Javascript Settings but never could get it to work there.
AL
I tested a little different Generico template version (placed the first script tag to Additional HTML):
<div id="calculator@@AUTOID@@" style=@@styles@@></div>
<script>
var elt = document.getElementById('calculator@@AUTOID@@');
var calculator = Desmos.Calculator(elt);
calculator.setExpression({id:'graph@@AUTOID@@', latex:@@latex@@});
</script>
All graphs worked everywhere - the strange thing here was that if I used several generico tags like
{GENERICO:type=desmos,styles='width:300px;height:300px;',latex='y=x^3'}
{GENERICO:type=desmos,styles='width:500px;height:500px;',latex='y=2x^2-3x'}
in the same section both graphs were rendered, they had different graphs BUT both had the same width and height (the first styles)
With script tags I had no problems in getting different width and height for different graphs in the same section (editor content area)
Doing the Generico filter the way I have in the picture above, I am able to put multiple graphs on a page even in the same section. I did notice that the Generico popup where I have the opportunity to
change the width, height, and equation prio to insertion, seems to be cached so that when I
add the second and third filter, it actually repeats the data from the
first one. If i then change it in the editor window, it will stay changed and each one then renders its graph using its own width and height settings when the question is previewed or used in a test. If I hand type the filter code instead of inserting it with the Atto toolbutton, it's never a problem.
One other thing I have noticed is that if you "rapidly" show a bunch of graphs, such as what happens when students take a test with graphs in the questions, the x,y grid will show right away, but the actual plots start taking a long time to show up. In some cases they never do. This occurred when it was just me and my one student account after a short while, and then much sooner when it was me and six actual students. Makes me wonder if the server responding to this public api is a slow server and just can't keep up with the demand.
Thats very interesting. I guess there could be some caching issues going on. FWIW I also made a template and it looks like this. The actual text I attached in a file to this post.
Some notes:
i) the "requires js" takes just the script url. and its best to start with // (not http: ) Its best to use the "requires js" field and not put it in the body, because this way the script will be loaded just once on the page, regardless of how many desmos graphs there are.
ii) when using variables in the custom js script, they will be replaced not with the variable's value eg 123, but with a js variable that holds the value, eg opt['autoid'] .
So "@@AUTOID@@_graph" in the custom js script would end up as opt['autoid']_graph and might not work. But "@@AUTOID@@" + "_graph" would end up as opt['autoid'] + '_graph' and would work.
Thanks for the text file. It is working much better than what I had. It will be a couple of hours before I have a class with students that will let me test with a few folks loading graphs all at the same time.
I still have some sort of caching going on so that when I add the filter multiple times during an editing session, no matter what I type in the pop up window, the next insert duplicates the first insert. Directly typing over the inserted text in the editor window fixes the problem, though.