MyEduSmart: find your grades

[jamie]

MyEduSmart (demo) by Team Holy Roller

The goal of MyEduSmart is to find your grades in the worst college website ever created.

(There are no ARG or horror elements in it, it’s just a lot of jokes.)

Tech stack

Unsurprisingly, MyEduSmart runs in the browser. I decided to use a modern frontend stack: Vue.js, TypeScript, Vite, and Tone.js for audio. I’ve generally been a skeptic of the frontend ecosystem but I actually really like Vue. It would have cost me a lot of dev time if I had stuck with jQuery or something.

One deliberately non-modern decision is to avoid CSS frameworks like Bootstrap. This is because I don’t want any framework giving automatic professional styles for elements, and forcing myself to code all the UI from scratch gives more authentic and hopefully funnier results.

There is no backend here, it is all just static assets, and hosting the game requires only a static file server. It all fits in an iframe on Itch. There are a few instances where more unusual browser features are employed as jokes in the game.

Graphics

There’s a certain look to school websites from different eras that I’m going for here. There are a few parts of it that look dated and amateurish, but I try not to use that as too much since it can be a crutch. It often tends to be funnier when the site design is modern, professional, and utterly soulless, and the humor is delivered more through behavior and writing. More importantly, the design philosophy here is to look inconsistent, rushed, and either under-budgeted or over-budgeted.

I have a big folder full of reference screenshots (some sent over by friends from their work and school websites) that I’m still mining ideas from. I have no idea what I’m doing with CSS and have no professional web or graphic design experience, which is almost a plus here.

Vue 3’s “single-page components” and scoped styles proved particularly nice for this project because I can define completely different CSS for each part of the game. This helps sell the notion that MyEduSmart is a dozen or so incompatible services from different teams stapled together.

I grab a lot of assets from OpenClipArt, Pixabay, and Pexels. FontAwesome and Material for icons. Lots of Google Fonts too. Tip: if you plan on using Google Fonts, use google-webfonts-helper to download and self-host them.

Writing

My vision for this game is 90% Easter eggs. Anything you click on should have a dumb joke. There is in fact a plot to the game, which gradually plays out over the MyInbox messaging system and the “virtual assistant” chatbot MartyHelp.

My most recent milestone was making it possible to play MyEduSmart start to finish. The original concept was that the game ends when you find your grades and your “grades” are just the statistics on how quickly/efficiently you finished them, but that felt anticlimactic, and the current ending is much more bombastic and fittingly absurd. But even if someone just clicks around for 15 minutes and laughs, that’s a success in my book.

Background

I had the idea around 2017, and I was in community college at the time. When COVID hit and the “e-Learning” industry exploded, MyEduSmart became so urgent that I couldn’t not make it. I really buckled down and officially started the project in August 2023, and I’ve been working on it on and off since then. It’s mostly a solo effort, but I have one other person who’s contributed a lot to the “learning modules,” which we make in Google Slides.

[twky]

Glad to finally see some public writing on this! As someone who literally has worked on college webapp infra the development angle on all this is pretty funny to me. Making good tech choices to result in a bad UX sounds very delicious. Several of our older less-used pages on the app I used to work on had turned out to be broken for months because we thought we could graciously get rid of having to link two different versions of bootstrap at the same time.
But Jamie: how will you beat the ARG allegations?

[kdx]

that looks… fun?? will follow closely, and for sure try on release

[jamie]

One of the challenges of this game is that when I’m working on some part of it, it’s really hard to stop myself from going overboard and creating a lot more work for myself. I wanted to knock out the Stress Module (one of the crucial sections for the plot) a week or two ago, and while working on it I ended up adding five “submodules” each exploring some aspect of stress management. Each submodule contains a quiz to “test your knowledge.” Basically I quintupled the amount of writing I need to do for this section.

The Stress Module is designed to look a lot more professional than the other learning modules, and early feedback tells me that this makes it all the more horrifying.

[jamie]

@twky

But Jamie: how will you beat the ARG allegations?

I call it a “reality game.”

[jamie]

I got a little tired of this project and felt a barrier to working on it as of a few weeks ago, but my energy to move forward with it seems to be back now.

It’s currently in state that only a game dev could appreciate, given the amount of placeholder content, etc. but it’s playable start-to-finish and ready for some early playtesting. If you want the link & password let me know.

[jamie]

Got good feedback from round 2 of playtesters, who comprised @twky and some friends IRL and online who are willing to put up with jank.

For the positives: a lot of remarks on the visual accuracy of the parody, and generally the humor seemed to land. One unintentional bit was that a fake payment system in the game actually causes Chrome to autofill the player’s name and credit card info. Caused a few laughs, and I imagine it will skeeve people out a bit too.

Overall, it seems like the game is too hard. There are intentional puzzles and mechanics illogical enough that they seemed like bugs to playtesters.

The biggest issues concern navigation. The game is designed so that the browser’s navigation buttons are rendered useless, and in certain points there are “escape puzzles” where the goal is to try to get out of a certain page back to where you were. These were frustrating for testers and didn’t really work as jokes either.

My plan is to eliminate all such puzzles and add “back to home page” links as typically found in websites. (twky suggested using a fake navigation bar, which is a good idea, not sure if I’ll follow through with it.) I do want to keep one escape puzzle, which is figuring out how to log back in after the site “logs you out for inactivity.”

Puzzle design is tough and I’m not very good at. Going forward I’m going to reduce a lot of the puzzle aspects and concentrate on the writing and design, especially adding more pages.

[twky]

there is honestly a very fine line this game seems to straddle on. i can imagine the sinister Devil’s Grin that would push you to make the whole thing as visceral as possible here, and really the further you lean into it the more successfully it does execute on the base premise at the cost of a lot of accesibility. tip the scales too far the other way and the game would probably end up feel like a slide show of jokes. does it feel like you are needing to ‘pare things back’ in that regard?

[jamie]

Fixed a bunch of navigation issues in response to playtesters’ input.

My current task is to complete any remaining placeholders in the Learning Modules. Here’s a bit of the Bullying Module (I am beginning to wonder if the Comic Sans is too on the nose):

Here’s the Password Module, featuring my personal favorite joke in the game:

I’m also trying to get into a rhythm of adding new pages regularly, since the game feels too small as-is. I’ve gotten to a point where I can add a new page in a few hours’ of work. Here are some recent additions.

By the way, the 2FA code adds a new digit if you get it wrong.

I also noticed that some playtesters totally disregarded email messages, including ones that were central to the plot. I imagine this is because checking email is not most players’ idea of fun, and on top of that MyEduSmart sends you all kinds of horseshit messages that you don’t need. Some work on my end is necessary to ensure that the most crucial plot points are not buried in here.

Another issue is that it doesn’t feel like a website because navigation is too immediate. On my to-do list is adding fake loading stages as the player navigates around, and to be especially cruel, a “rage detector” where if the player is clicking too furiously then the loading times will increase.

[austin]

I straight up joined this forum because I read this thread and it knocked my socks off; I think this is a hysterical idea for a game.

@jamie

If you want the link & password let me know.

If this offer is still open, Id love to try it out!

One thing i will say sight unseen, though, is that I find the idea of having labyrinthine subsections of the site where the player is intended to get lost and have to struggle to get back to a previous page sounds kind of great as a one-time thing, provided you’re signaling that intent to the player. This format does present unique obstacles on that front, but I think like locking the player in a specific portion of the site with a layout or color scheme or something might be a way to make stuff like that work.

[jamie]

Very flattered by this! Just sent the details via PM.

[drakonic]

This sounds like an amazing concept. I love what you’ve posted so far.

@jamie

On my to-do list is adding fake loading stages as the player navigates around, and to be especially cruel, a “rage detector” where if the player is clicking too furiously then the loading times will increase.

Absolutely devious! I love it.

If the offer is still open, I’d love to playtest as well!!

[SoleilRaine]

As somebody who just barely graduated college, these screenshots are inducing a sort of… is there a word for nostalgia but bad? Is that just trauma? Anyway this is awful and I love it so much.

[jamie]

I went to a game dev meetup/loose jam thing for the first time and there was one nice person there who really dug the game and gave me some excellent feedback.

The current setup of the game is that you complete “Learning Modules” and arbitrarily, one of the modules unlocks the “MartyHelp” virtual assistant. A mostly-linear series of puzzles advances the plot and leads to completion of the game. I have generally felt dissatisfied with how this works out in practice, but being inexperienced at designing games I couldn’t put my finger on why it was bad nor how to fix it.

He gave a really great suggestion: since the game’s humor is designed to reward exploration, it benefits from a mechanic that rewards exploration too. Instead of point-and-click-style puzzles (which, as I’ve said above, I’m really bad at designing), the player collects points for every little thing that gets clicked on. Completing the game wouldn’t require 100% of the possible points, more like 60%. This is way better than my current approach, and works perfectly in-universe: “Collect AchievementGoals LearningPoints to unlock more MyEduSmart features!”

I’m also planning on changing the ending considerably. For optimal pacing it needs to be linear, and it should be obvious to the player what to do, and it’s not right now, except for this part.

[twky]

@jamie

He gave a really great suggestion: since the game’s humor is designed to reward exploration, it benefits from a mechanic that rewards exploration too. Instead of point-and-click-style puzzles (which, as I’ve said above, I’m really bad at designing), the player collects points for every little thing that gets clicked on. Completing the game wouldn’t require 100% of the possible points, more like 60%. This is way better than my current approach, and works perfectly in-universe: “Collect AchievementGoals LearningPoints to unlock more MyEduSmart features!”

if i may tack onto this there may still be a need with a system like this to delineate between the player just doing something that is there, vs. the specific events and puzzles that advance the game state. like to simplify here, clicking on some random thing is just worth one MartyCoin or whatever, but solving an actual puzzle that opened up a new area on another page would award more, or a different color of item, so on. Could be a way to silently teach the player what kinds of thinking they need to perform to get to each module

[jamie]

@twky Good suggestion, thanks.

---

Although it’s been good to plan out what I want the mechanics to be, I’ve also realized that I need to get a public demo out here at some point. It shouldn’t take too long, since it’s more about taking away things I’ve developed, and a small amount of polishing.

One thing that was not obvious to me was how to disable features of the game and ensure that their assets & associated code doesn’t show up in the build. This was fairly non-obvious to do with this stack. In C++ you’d just pepper #ifdef everywhere, but TypeScript does not have this kind of conditional compilation.

I did eventually find the answer in Vite’s env variables. If you write import.meta.env.DEV somewhere in the JS, Vite will statically replace it with “true” or “false” depending on whether it’s a dev or production build. If the modified code ends up like if (false) { ... } then tree-shaking will remove that branch, and hopefully anything it imports (if the imports don’t have side effects) and any assets from those imports.

You can also define custom env variables like import.meta.env.VITE_DEMO. (They must be prefixed with VITE_ or they will not propagate to components.) I tried a few things, like putting that variable in v-if, but the obvious solutions either caused errors or didn’t result in tree-shaking. I ended up having to do this:

<script setup lang="ts">
import StudentPortal_ from "./StudentPortal";
import Empty from "./Empty";
const StudentPortal = import.meta.env.VITE_DEMO ? Empty : StudentPortal_;
</script>

<template>
  <StudentPortal v-if="currentPage === Pages.StudentPortal">
  <MyApps v-if="currentPage === Pages.MyApps">
  <!-- ... -->
</template>

Due to the (imo very nice) way that Vite works, this also means that any image, video, or audio assets loaded by components shaken out of the tree will not be packaged with the build. Aside from making the build smaller, it also allays my irrational paranoia that someone would consider snooping around the game files to find unreleased material.

As the above snippet shows, the top-level app routes the user based on the currentPage ref and a bunch of v-if switches. Normally this something that would be done with vue-router. As far as I can tell the main advantage of a router is integration with the History API, back button, etc. but my needs are different here, as some puzzles in MyEduSmart will be trivially easy to solve if I allow the user to use the back button, so I’ve gone with a very simple manual approach to routing.

[jamie]

Adding little fake loading stages really makes the feel of the game much more realistic and pisses me off so much. I’ve got this little function called multiLoading which takes an array of N delays in milliseconds and returns a Ref to N booleans which gradually become true, and then I pepper conditionals like v-if="loaded[1]" so the different elements of the page trickle in, replacing various spinners and loading bars. (The spinners themselves contain little jokes, like some of them inexplicably stuttering.) Also very important for the full page to go blank and flicker briefly between two shades of off-white as you’re redirected between numerous services. This thing is new also:

[Antiquity]

Honestly I don’t even remember what my university intranet looked like, but this does remind me of the corporate foolishness, confusing navigation, and frustrating patchwork of bad tools of my employer’s company intranet.

[jamie]

THE DEMO IS LIVE

MyEduSmart (demo) by Team Holy Roller

[Antiquity]

Hooray, I STOPped bullying!

I probably didn’t see everything in the demo (I wasn’t sure what the scope of it was until I saw the ending screen), but it was incredibly irritating and funny as hell from the first screen. It’s very accurate to how god-awful these cobbled-together intranets are, and to the clueless idiocy of compliance training.