H5P Plugin in WordPress Giving You Crazy Code on Download Attempt?

We ran into this yesterday and it led to all kinds of other nonsense that wasn’t the issue.

What was happening was that when you tried to Reuse>Download an existing H5P file it wouldn’t download it but would print the nonsense that is in the image above.

We ended up going down all kinds of rabbit holes because we were also having an issue with permission and updating H5P libraries. Those issues weren’t related at all but did eat up some serious time. Those things tend to snowball and I end up adding a wheeluser in WHM so I can SSH into a sub-install and mess with folder/file permissions via terminal.1

Anyway, what interests me in some ways is that I finally gave up and posted for help on Twitter at 8:07 this morning. I hate to ask people for help if I haven’t worked pretty hard at solving something.

By 9:00AM my brain finally kicked loose where I’d seen that weird code-like stuff before . . . expletive-string2 mime types. A bit of Stackoverflow later and I was able to add the following to the .htaccess file and fix the issue by 9:10 or so. Maybe finally giving in releases some mental blocks because this happens fairly often.

AddType application/octet-stream .h5p

<FilesMatch "\.(?i:h5p)$">
  ForceType application/zip
  Header set Content-Disposition attachment

1 It sounds fancy and I hate it. Not how I want to spend my time. Anyone can do it but the vocabulary alone is such a hassle and the result is . . . basic functionality for a folder/file.

2 Not an actual technical term but it should be.

Weekly Web Harvest for 2020-09-13

Weekly Web Harvest for 2020-09-06

Weekly Web Harvest for 2020-08-30

Weekly Web Harvest for 2020-08-23

Weekly Web Harvest for 2020-08-16

Recent Work – July-ish Edition

Life is like a box of chaos and Forrest Gump was/is a descendent of Nathan Bedford Forrest and I’ve never read the Forrest Gump book.

It’s always been difficult for me to keep track of what I did. I’m good about managing what’s in progress but once it’s done it fades from memory fairly quickly. It’s been worse lately as there’s just a lot going on. That is the purpose of writing these posts and really the main purpose of this blog over the years. I tend to look back at a few places to jog my memory when I write these- my calendar, github commits, codepen, and the YouTube videos I’ve made. Not perfect but it gets me started. It’s always amazing how much I forget until prompted. If anyone has better paths, I’d be interested in hearing about them.

WordPress-y Things

Lots going on with WordPress. I think I’m making some marked improvement on my overall design skills lately. I’ll credit Matt Roberts for inspiring me to up my game on that end. I’ve always cared what things look like but I think I’m better able to pull the whole thing together in a way that feels more unified now.

Motivation in Context

This is a lab site that has some custom post types and a nice relationship between people and projects. You can see the Motivation in Context theme here. The video tour below shows how it all fits together.

Science Discourse

I had some fun with little design elements on this site because the topic made it fairly easy to do.

Header area from the science discourse site.

Matt made the logo to the left which I like a lot and I found the robot on the noun project site. Since the noun project lets you download the images as SVGs, I was able to use the image as an inline svg and a bit of CSS and make it blink “hi” in morse code.1 I find the inline svgs a bit messy but the ability to animate them via css is worth it.

.robot-ray {
    fill: #ffb300;
    -webkit-animation: hideshow 10s ease infinite;
    -moz-animation: hideshow 10s ease infinite;
    animation: hideshow 10s ease infinite;

@keyframes hideshow {
  0% { opacity: 1; }
  4% { opacity: 0; }
  6% { opacity: 1; }
  8% { opacity: 0; }
  10% { opacity: 1; }
  12% { opacity: 0; }
  14% { opacity: 1; }
  16% { opacity: 0; }
  22% { opacity: 1; }
  24% { opacity: 0; }
  26% { opacity: 1; }
  28% { opacity: 0; }
  30% { opacity: 1; }

You can also see more morse code inspired design in the white dashed line below the word News and the gray background has our robot friend from the header holding hands with itself.

Morse code line spelling out new news if I recall correctly.

And finally a message in binary.

Instagram to Canvas via WordPress

This is stupid and awful. The worst part being that it didn’t have to be. The first travesty is that Instagram’s embed code has an external js file. That gets cleansed by just about every system and the embed breaks. Secondly, Instagram has pretty much shut off it’s API because getting approval for even public data is unlikely. And finally, Instagram/FB is going to require authentication to even do oEmbed. Pretty much a disaster and I hate them.

I tried a variety of scraping options which worked in development but ran into problems on the server where I ended up getting blocked pretty quickly. Not being able to justify a ton of time for this, I went the non-Programistan route.

I just made a WordPress site and tied in a Gravity Form. I have a plugin there that lets me add a javascript via a custom field and a theme that’s made for iframe embedding. You paste in the regular Instagram embed code and it reattaches the js. That gets you this. It’s dumb and I hate it but it lets you put individual Instagram posts into Canvas without drama.

I like that I’m reusing a multipurpose theme in combination with a multi-use plugin and my old pal Gravity Forms to make something work. The idea of building tools that are semi-technical that you can combine in novel ways to solve problems is something that I have always liked. What those tools continues to change as I learn more about programming but the concept remains useful and guides how and when I invest time and energy in certain work.

Timed Image Shower/Hider

A request from a fashion faculty member, this allows you to present images for timed sketches. It’s built into this WordPress plugin and is using that minimal iframe theme as the goal is to embed it in Canvas or Blackboard.

Other Stuff

Google Folder Embed Generator for Canvas (or whatever)

Another little iframe creator to help add the ability to put an entire folder in Canvas. It doesn’t look like the LTI integration lets you insert an entire folder so I made a way to do that.

Google Sheets Games

I ended up needing a data validation dropdown that would remove items as they were used. This was more complex to do than I anticipated but I came up with something moderately useful.

My first function gets all the student names from another spreadsheet.
=IMPORTRANGE(“https://docs.google.com/spreadsheets/d/whatever”,”Form Responses 1!B:B”)

My second function gets all the student names that have been selected in this spreadsheet.
=QUERY(‘Writer Contributors’!X:X,”select *”)

My third function compares those two to build a list of students who have not been chosen yet.
=filter(A:A,isna(match(A:A, C:C, 0)))

I then use that list to create the data validation drop down. The downside is that once chosen the choice is removed and then it gets flagged but as long as you allow the entry it’s no big deal.

Various Support Videos

I’ve been doing a fair amount of direct support. There are some boring things in here and a few interesting ones. Many of them deal with Canvas or Zoom. There is some kind of interesting stuff looking at the online Google Earth tool. It’s really nice but you can’t iframe it etc. The KML exports lose data when imported into Google Maps (which you can embed). The KML exports also don’t quite work when imported via Omnivore into Leaflet.

Forensic Science Interactive PPT

One of forensic science faculty, Catherine Connon, made a very impressive interactive powerpoint. It doesn’t quite work when embedded like this from One Drive but it’s close.

See the Pen
forensics ppt embed via one drive
by Tom (@twwoodward)
on CodePen.

Random Interactive Font Example

See the Pen
font OER interactive
by Tom (@twwoodward)
on CodePen.

Remake of the ALT Lab front page

See the Pen
alt lab course display alts
by Tom (@twwoodward)
on CodePen.

1 Probably. I think I verified it with someone who actually knows morse code.

Weekly Web Harvest for 2020-08-09

Weekly Web Harvest for 2020-08-02

Weekly Web Harvest for 2020-07-26

  • Zoom doesn’t need to be awful: Lessons from video chat history
    More importantly, this is a moment when we desperately need online environments that encourage dialogue between people from different backgrounds and perspectives—that are inclusive of more diverse forms of participation than “Hollywood Squares” allows. The current Zoom environment only sets us back from this goal by reinforcing an interaction model that has been rightly criticized for reflecting and perpetuating the worst instincts of professional meeting culture, such as power-hoarding and individualism.
  • The H5P PB Kitchen – Cooking with H5P & Pressbooks
    h/t @cogdog
  • Snake Handling | The First Amendment Encyclopedia
    State courts have consistently upheld the state laws as reasonable health and safety regulations, such as the Court of Appeals of Kentucky in Lawson v. Commonwealth (1942) and the Alabama Court of Appeals in Hill v. State (1956).
  • The adventure app Randonautica has led users to dead bodies, haunted houses, and other bizarre destinations / Boing Boing
    Fatum Project theory. “All things in the world are causally connected and everything that happens, including our thoughts, is usually determined by the sum of all environmental factors.”

    Randonautica is an app that borrows from the Fatum Project’s research to break away from the probability-tunnels our everyday choices create. Using a quantum number generator to send users to a set of mysterious coordinates, Randonautica has become a “fully functional reality-tunnel creating machine that digs rabbit holes to wonderland.”

  • British & Exotic Mineralogy
  • I Am a Model and I Know That Artificial Intelligence Will Eventually Take My Job | Vogue
    Digital models and influencers are successfully breaking into the fashion industry from every angle. Some have even been signed to traditional modeling agencies. Take Miquela Sousa, a 19-year-old Brazilian American model, influencer, and now musician, who has amassed a loyal following of more than 2 million people on Instagram. She’s collaborated with Prada and Givenchy, has been featured in a Calvin Klein video with Bella Hadid, and she just released a song with singer-songwriter Teyana Taylor this past spring.