Don Bryn

Using PHP to improve your page design

Blog Post created by Don Bryn on Oct 15, 2017

By using PHP, you can turn this:

Screen Shot 2016-06-07 at 10.12.57 AM.png

into this:

Screen Shot 2016-06-07 at 9.51.10 AM.png

 

 

Overview:

If you need to create content that is impossible to create in Canvas, you have some options.  There are some external LTI's that might insert the content you need, or possible SCORM, or the option described in this post:  PHP.  This post is not meant to teach you PHP, simply to show some possibilities.

 

PHP is a server-side scripting language.  That means that the content is at least partially created on-the-fly by the server hosting the web content.  It is possible to create the same content using only HTML, but each question, page, etc, has to be created individually.  By using PHP, you can create huge amounts of content in a fraction of the time by simply passing the information specific to each question or page to the server.  The content that stays the same on each page or question is created by the server at the time the web page is created.

 

I already know PHP, so this was quick for me, but I realize this solution is not for everyone.  However, it really was the best solution to create the massive amount of content needed for my courses.

 

Three Main Advantages:

  1. Ability to add content not handled easily or gracefully in Canvas.
  2. Ability to separate common content from question-specific content.
  3. Ability to style content.

 

1)  Canvas has limitations that prohibit or limit certain types of content and formatting.  For example, in order to insert the mp3 links into the question above, I had to add my mp3 links to a content page, enter the html editor, copy those links, go back to the question editor, enter the html editor, paste those links.  That's a lot of steps to repeat for 700 questions!  And you can see that the question is not easy to navigate and definitely not intuitive for students.

 

Using PHP, I can use traditional web technologies like javascript , CSS3, and HTML5, allowing me to use things like the media player seen in the second image above.  This allowed me to save a lot of space on the webpage.

 

2) Changes to one PHP page on my server will affect every one of the 700 questions in Canvas.    In other words, I am able to separate content that is specific to each question from content that is common to each question.   If I decide there are too many animations, it's a simple fix to turn them off and then they disappear in every question.  Only information specific to each question is needed in Canvas.  Everything else is stored on my own server and created via PHP.

 

3) Styling allows me to control placement of specific elements on the page much more precisely--an important point for creating music questions.  One of the reasons the use of CSS styling is limited for designers is that it can be very dangerous if you are not careful.  Fluid layouts are important in designing for all the different devices on which content will be viewed, and it can get complicated very quickly.  Your page might look great when you design on your desktop computer, but how will it look when viewed on a phone or a tablet?  I usually use jQuery to ensure all of my scripting is cross-browser compatible and test my CSS on various devices.

 

Two Main Disadvantages:

  • You need your own Secure PHP server to host your pages and content.
  • You need to learn PHP (and any other web technology you wish to use).

 

My own example:

In order for students to practice ear training, they need drills.  They need to be able to practice random intervals over and over, seeing the answer after each question.  Then at certain times in the semester, they have to take an ear training test where they don't get the answers.

 

So my task was to create an ear-training drill as well as ear-training quizzes.

 

The ear-training drill is literally impossible in Canvas because it is necessary for students to see the correct answers after each question, as well as hear the interval again after the question has been answered.  I couldn't find a way to do this unless the quiz only contained one question and the students kept submitting and restarting the quiz.  And even then, the layout of the question was so complicated that it would have made it difficult for students (see first image above), not to mention the difficulty in creating each question.  So my only solution was to create the drill on my own and place it into canvas as an iFrame in a content page.

 

So I basically created a web app that runs an ear-training drill then inserted it into a canvas page.  I was able to use all of the regular web-design technologies like scripting and animations.  The student selects options for the drill, which causes the page to request JSON lists from the server based on their selections.  Then a drill is created that supplies random questions based on those lists.  I have tried to insert the app here as an iFrame but evidently we are not allowed iFrames in blog posts.  You can see the app inside a canvas page here:  https://canvas.instructure.com/enroll/D4EHD7  (I really recommend taking a look.  The animations are fun).

 

The next task was to create a quiz.  This would be more difficult because my web app cannot pass score data back to Canvas.  So that means I have to use Canvas' own quiz engine, which personally I don't like because of it's restricted options.  I understand the restricted options I guess, because it needs to be simple to use to make it accessible to a wide range of users, but if you are accustomed to seeing and creating web content, it is severely limiting.  Specifically, selects in Canvas are always set to a minimum width of 26 (I think) characters.  That means they take up way too much space on a web page, especially if placement of content is important.  In music, the placement of answers is often very important in relationship to the content, though it was not as important in this type of question.

 

So the solution was to use part of the web app and insert it into the Canvas questions, but still use Canvas' native selects for answers.  That is the 2nd image you see above.  Canvas simply holds an iframe whose source points to the php page on my own server.  This source includes the content-specific information needed by the php server to create  the question:  interval type, clef, starting note.  The php then creates the question.

 

Voila, it all works.    The final step I had to take was only to create .qti files for each bank--a process that is getting very quick using a good text-editor (I use Textwrangler).  Most of the work is done starting with a template .qti file and using find/replace to change options.  The only part that takes much time is the first file created for each interval where I have to manually change the answer to each question in the bank.  This is still a much faster method than using Canvas' GUI.

 

The future:

I'm really banking on Canvas providing better support for SCORM because I would like to eventually use the web app and branches of the app to directly supply scores to Canvas.  For this to really be useful, SCORM content would need to be able to be copied between courses, so please vote for that here:  https://community.canvaslms.com/ideas/5599

 

Conclusion:

While creating all the necessary content for this large a question bank is still time-consuming, creating the actual questions is not.  And in the end it saves a lot of time for me during the semester as Canvas can automatically grade quizzes I had to manually grade in the past.  AND, because I'm using PHP, changes are very simple to implement.  I just change one PHP page and it populates all of my questions.

 

If you need to do more than Canvas is capable of providing with the current quiz engine, PHP might be a great option.

 

If you feel that PHP is too overwhelming, please see my other blog post about the advantages of using iframe in your design:  iFrames are your iFriend

Outcomes