Joey Restaurants

Client Admins

  • Sissi Wang

    • swang@joeyrestaurants.com

  • Chelsea Shea

    • cshea@joeyrestaurants.com

This client has the following eco produced by ICOM:

  • https://joeyedu.com/

List of Features

List of Courses

This client has the following courses produced by ICOM:

FOH Flashcards

(Last updated Feb 3rd, 2017)

http://downloads.icomproductions.ca/flashcarddemo/story_html5.html

(View the above link via iOS or Android browsers)

The servers need to memorize a variety of information on various dishes served at Joey Restaurants. It was mentioned that their servers would often make flashcards in order to memorize them. So we offered to make our own interactive version of their flashcard decks that can be utilized on mobile devices and eventually edited by the Joey's staff themselves (they will be purchasing a storyline 360 license and have access to photoshop.)

Why was storyline chosen for this? Firstly the idea was mobile friendly, which currently Storyline 360 is showing a lot of promise for. Secondly storyline can be a quick rapid prototyping tool, so when the thought of flashcards was brought up an idea came to mind for using storyline to do it so a prototype was developed to show the client. The client approved of it so we moved forward with it. Thirdly there is a possibility to track if the user has viewed all the cards, so if the client changed their mind regarding tracking it should be relatively easy to do it.

Developing the Cards (photoshop)

Most of the design work is done and exported in photoshop. This is so that the look of the cards aren't impacted by HTML5's limited font library, and keeps the design aspects separated from the technical aspects within the storyline template. The client also already has access to photoshop and thus this should help ease their workflow once we transition it over to the client end for minor editing.

The photoshop template may require some tweaking, cleanup, but here is a basic overview of it as of Feb 3rd 2016. There's a black background layer, a folder called background (this is actually the splash menu), a folder called background 2 (the background for the card interface), and a folder for the front and back of the card designs.

Within the front and back folders you will want to embed folders with the names of the cards you are adding. Every card will require a front and back design, the front showing a picture of the food or beverage, and the back containing the information about the item for user memorization. The images will be taken from PDF's supplied by the client, please ask the PM for their wear abouts. The card design in these screenshots are currently the approved designs by the client, please keep consisten with the colors and layouts when possible. If you have concerns regarding too much or too little content please mention it to the PM or writers.

Once your designs are finalized please export the cards as pngs with the background folders hidden from view.

Storyline Template Functionality

There will be two Scenes in the course: The Randomizer Scene, and the Main Menu.

The Randomizer consists of 3 upfront slides: The Flashcard intro, the Question Bank, and the Flash Card Result slide.

View the screenshot below for the intro slide:

There are two variables in this template and is used only in conjunction with the randomized cards. The question bank that generates the randomized cards has to be reset after every round otherwise it will only randomize the cards in the bank once and retain that order every time the user reviews them. In order to trigger the reset, the slides (only within the question bank) need to count how many cards have been viewed (cardnum + 1), and once the deck has been fully viewed (decktotal) it will jump to the result slide which will then reset and scramble the question bank. (When "cardnum" = "decktotal" jump to slide "Flash Card Results")

Each deck has a different amount of cards, so "decktotal" needs to be updated with the proper # of cards based on what deck you are building. In the template I have left it at the default value of 3.

The question bank will have to be filled AFTER the main menu scene has been populated. Why? Because it is easier to import slides into the question bank than it will be to copy the question bank slides into the Main Menu Scene. Also the randomized cards require the variables 'cardnum' and 'decktotal', while the Main Menu slides do not. It will be easier adding the code for the randomizer than clearing it from a dozen cards.

How Individual Card slides Function

The above image is of a randomized card. The Main Menu cards will function identically minus any references to the "cardnum" and "decktotal" variables. The card slides consists of a base layer, and two slide layers named "front" and "back." On the base layer you will just have next and back button functionality, as well as a trigger that will 'show layer' 'front' when the timeline of this slide starts. Without this timeline trigger the card will not appear and you will be left on the background image.

The front layer consists of a timeline with a que point, the front card graphic, and three triggers. You want the timeline to pause when this layer reaches the cue point (which should be located near the middle of the timeline.) When the timeline ends for this slide it will show the layer 'back'. When the user clicks on the card image, the timeline will resume and the timeline for this layer will end triggering the back layer. It is set up this way so entry and exit animations are triggered, to give the implied 'card flip' (storyline doesn't have a true card flip animation so 'fly in' and 'fly out' were used instead.)

The back layer functions the same other than it shows the 'front' layer at the end of the timeline instead of the back. Both of these layers need the slide properties of "reset to initial" and "hide slide layer when timeline finishes" checked.

Player Settings

Never have the seekerbar, title, volume, or logo checked. Move the menu under "Topbar Right" in the scroll menu.

Under the 'other' options never resume, resize browser to optimal, scale player to fill browser window. No 'launch player in new window.'

The black color scheme works fine for joeys. Since this project is primarily for mobile, the mobile interface of storyline 360 looks different than this interface anyway, so it's not overly important.

Storyline 360

The most notable difference once you port your decks to Storyline 360 are the 'swipe' options. These are basically duplicate triggers to the next and back button triggers you'll see in the Storyline 2 version, but are mobile compatible. The Users will be able to swipe from one card to the next using these actions.Your publish settings will also be impacted, since mobile player is no longer necessary. The Joey Flash Cards are HTML 5 based.

Rather than uploading to QA3, testing is easier on the ICOM web server. The image on the left is our current test folder HOWEVER I recommend creating a new folder for testing each deck on mobile devices.

While you can test on a mobile device on QA3, there is no real benefit to doing so. QA3 takes longer to load on mobile, and currently LMS tracking is not required with the flash cards.

Common Issue

New Employees Not Showing in Campus


Solution 1. Run CRON includes/modules/FM_UserImporter/run.php

Solution 2.

Check Joey SFTP site using FileZilla or WinSCP

Account is located in Joey's eco, in the List Application Settings then dropdown to JOEY. You'll need IDs 12-14 to login

Once their FTP is accessed, check each folder and put the files with the .Parsed extension to the Parsed folder.