Table of contents
You’ve played around with the rotate content tool, you’ve figured out it makes sense to allow an element of randomness in assigning peer partners for feedback on writing assignments, and you’re all ready to add your little script to your own website.
Except… if you’re on WordPress, there’s a chance notice nothing happens.
Possible issues
- You can’t just type up code in the (Gutenberg, WordPress 5.x) Visual Editor and expect it to show up. In fact, I can’t even copy-paste it here!
- If you use the “Code” block in the editor, it will neatly display the code like this:
<script type="text/javascript"> var display = " " </script><script type="text/javascript" src="https://hacks.tinekedhaeseleer.net/hst269-01.js"></script>
That’s useful if I want to share code with my readers, but not if I want to RUN the code to display randomly rotating content!
- You can add the script with a “Custom HTML” block if you embed it in <p></p> tags, or other HTML formatting, but many of us (including me) like WordPress for its WYSIWYG Visual Editor, so that defeats the purpose of using WordPress.
- Code actually shows up fine if you copy-paste it in the Code Editor without further ado, and that turns it into Classic Block when you revert back to the Visual Editor. Here I pasted my new code for the Hexagrams from the Yijing (Book of Changes):
Screenshot of the Visual Editor:
You can actually edit that classic block as HTML, and that’s fine if you like playing with HTML and know what you’re doing. But again, it’s not why I came to WordPress.
One possible solution: A Plugin
Plugins are what make WordPress tick, so no surprises to hear that a plugin helps me with this workaround: Code Embed
I have left the settings as they are, and just follow the instructions:
Here’s a more detailed walkthrough with examples and illustrations:
You find the Customs Fields box as follows:
- Click on the kebab (three dots) menu in the top right corner of the editor window, and click on Preferences. (Image 1)
- In the Panels section, activate “Custom Fields” (Image 2)
- Click “Enable and Reload” or if not visible: you may have to reload the page
All the way at the bottom of the page/post editor window you will now see “Custom Fields”.
To add your JavaScript: click on “Enter New” in the Custom Field area, and give it the name you want. (In the image below, that’s where you see the blue “Cancel” under CODE1)
I named the codes with something more meaningful than CODE1, e.g. “CODE271-4-1” (for course HST271, first post of week 4). You may remember that my JavaScript file had a similar naming structure, so that makes it easier to check if I have the right script lined up in the right place.
In the “Value” space next to the code “Name”, I paste the script, which is a simple copy-paste-adjust job from the previous time I used it. The feedback for Week 4 (271-4.js)
<script type="text/javascript"> var display = " " </script><script type="text/javascript" src="https://hacks.tinekedhaeseleer.net/271-4.js"></script>becomes this for week 5, by simply changing the link (271-5.js)
<script type="text/javascript"> var display = " " </script><script type="text/javascript" src="https://hacks.tinekedhaeseleer.net/271-5.js"></script>Then I click the “Add Custom Field” button (Image 3), and the script is ready to deploy! It will appear in the list “Custom Fields” where my chosen WordPress theme (Higher Education) has already have filled out a few of these. (Image 4)
The final piece
So… Now the JavaScript is ready to go into the page: where do I want it to appear? As the developer’s instructions say above: I add CODE1, or in this case CODE271-4-1 (or whatever the name is I gave it) where I want it to appear, under the assignment “Peer feedback” but INSIDE {{ }} (Unfortunately, if I do that, even inside an inline code block it shows up as invalid script.)
- Student post 1: {{CODE271-4-1}}
- Student post 2: {{CODE271-4-1}}
- Student post 3: {{CODE271-4-1}}
- Student post 4: {{CODE271-4-1}}
In this post, you don’t get to see that code because I have removed that script from my file manager when I was cleaning out last summer. Now you know what it looks like when you haven’t provided the proper link in your script!
So instead, here is a selection of random posts from my Covid-journal when we were yanked out of our classrooms and into emergency remote learning in the middle of Spring 2020. I just took a half hour to collect all the links and create the randomizer. If any of the days are the twice or more the same, or you’ve seen them before, refresh the page for a new set:
- Random day A: {{CODEA}}
- Random day B: {{CODEA}}
- Random day C: {{CODEA}}
- Random day D: {{CODEA}}
(Collecting the links takes the most time. In a future post I’ll explain how I make it easier for my students’ posts to gather them all in one place, using Inoreader, but any RSS reader will do.)
Re-using code/scripts on the same blog
I create a new page for every week of each course’s materials and assignments. When I need to add a reminder about an assignment with a randomizer, that carries over into another week. I simply pick the name from the drop-down list of Names, and paste the code in the Value field. This is what that looks like at the end of the semester with lots of feedback on blog posts:
Here is where it pays off for me to have the same name for the CODE as for the JavaScript file, so I know that CODE271-12-1 aligns with 271-12-1.js.
Let me or Laura know how you use the Rotating Content Tool! Happy to help you discover the “Power of Random”!
About this blog series
This post is part of a series of posts explaining the digital tools I use for teaching courses online, face-to-face, and mask-to-mask.
If you like this post, please explore the others in the series, and sign up for new posts in the sidebar, under the Growth Mindset Cats 😀, add the blog to your RSS reader, or check back on Monday, 3pm CET/9am EST, so you’ll never miss a post!
Leave a comment with questions and requests for other similar content. Thank you! 😽