{"id":20154006,"url":"https://github.com/jbroadway/hypester","last_synced_at":"2025-04-09T21:52:32.694Z","repository":{"id":66249959,"uuid":"20532707","full_name":"jbroadway/hypester","owner":"jbroadway","description":"A JavaScript library to help with common forms of interactivity in the Tumult Hype HTML5 editor.","archived":false,"fork":false,"pushed_at":"2014-06-24T19:22:34.000Z","size":424,"stargazers_count":11,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-09T21:52:26.741Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://jbroadway.github.io/hypester/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jbroadway.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-06-05T16:30:55.000Z","updated_at":"2022-12-20T08:31:55.000Z","dependencies_parsed_at":"2023-02-20T01:00:45.779Z","dependency_job_id":null,"html_url":"https://github.com/jbroadway/hypester","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbroadway%2Fhypester","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbroadway%2Fhypester/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbroadway%2Fhypester/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbroadway%2Fhypester/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jbroadway","download_url":"https://codeload.github.com/jbroadway/hypester/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248119401,"owners_count":21050754,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T23:24:21.089Z","updated_at":"2025-04-09T21:52:32.676Z","avatar_url":"https://github.com/jbroadway.png","language":"JavaScript","readme":"# Hypester\n\n**Status: Alpha**\n\nA JavaScript library to help with common forms of interactivity in the\n[Tumult Hype](http://tumult.com/hype/) HTML5 editor.\n\nNote: Requires [jQuery 1.8+](http://jquery.com)\n\n## Setup\n\n1. Include jQuery in your Hype resource library\n2. Include hypester.js in your Hype resource library\n3. Call the appropriate functions below\n\n## Features\n\n### Initializing a new scene\n\nTo initialize a new scene, create a timeline action on the first frame that calls\nthis function with your scene settings:\n\n```javascript\nhypester.init ({\n\thype: hypeDocument,                 // a copy of the hypeDocument object\n\thidden_elements: 2,                 // how many hidden elements to find in the scene\n\talert_timeline: 'alert-incomplete', // the timeline of the alert message\n\tnext_scene: 'next',                 // the next scene to load\n\tcompleted: false                    // mark the activity not completed\n});\n```\n\nThis does several things:\n\n1. If a `#scene-name` hash is added to the end of a URL, it will jump to that scene immediately.\n2. Initializes the number of hidden elements to find in the scene, for use with `hypester.next()`.\n3. Initializes the scene history for dynamic \"Previous\" buttons in branching scenes.\n\nIf no hidden elements are present in the scene, the defaults should not cause any\nbehaviour issues for other scene types. Alternately, you can use the shorter form\nof the function call like this:\n\n```javascript\nhypester.init ({hype: hypeDocument});\n```\n\n### Navigating to a specific scene from another file\n\nTo send a user to a specific scene within a Hype file, make sure the file you're\nnavigating to uses the `hypester.init()` function in the first scene, then link\nto it with the scene name in the URL's inner anchor value, like this:\n\n```\nmy-hype-activity.html#scene-name\n```\n\n### Triggering the next scene\n\nTo trigger the next scene, while ensuring all elements were clicked and/or the\nactivity has been marked completed, attach a callback action to the \"Next\" button\nthat calls this function:\n\n```javascript\nhypester.next (hypeDocument);\n```\n\n### Marking the scene completed\n\nTrigger this when the activity has been completed so `hypester.next()` knows to\ncontinue to the next scene.\n\n```javascript\nhypester.completed ();\n```\n\n### Marking a hidden element as clicked\n\nTo mark a hidden element as clicked, call this in a callback function on the mouse\nclick event for each element, numbering them from 0 to 11 (instead of 1 to 12):\n\n```javascript\nhypester.clicked (0);\n```\n\n### Go to the previous scene in a branching scenario\n\nTo go to the previous scene in the history of a branching scenario, attach a\ncallback action to your \"Previous\" button that calls this function:\n\n```javascript\nhypester.previous (hypeDocument);\n```\n\n### Creating drag and drop activities\n\nUse the `hypester.drag_handler()` and `hypester.drag_completed()` functions to\ncreate drag and drop activities with multiple dropzones per draggable element,\none or more of which are the correct choice.\n\n#### Step 1. Initialize the scene\n\nInitialize the scene on the first keyframe of the `Main Timeline` like this:\n\n```javascript\nhypester.init ({\n\thype: hypeDocument,\n\telement: element,\n\tevent: event,\n\tdraggable: {\n\t\telements: 4,\n\t\tcompleted_timeline: 'complete',\n\t\tdropzones: [\n\t\t\t{ id: 'drop1' },\n\t\t\t{ id: 'drop2' },\n\t\t\t{ id: 'drop3' },\n\t\t\t{ id: 'drop4' }\n\t\t]\n\t}\n});\n```\n\nSpecify the number of draggable elements in the `elements` setting, and a timeline\nthat should be run when all of the elements have been dropped into the correct dropzone.\nThis timeline will be triggered by `hypester.drag_completed()` only when all of the\nelements have been dropped correctly.\n\nEach dropzone has an `id` setting that should match an element's `Unique Element ID`\nfield in the Hype Inspector, which you will need to set manually. A dropzone may also\nhave `bg_off` and `bg_on` settings which are used to toggle the background image of\nthe element when a draggable element hovers over it. The images should be loaded into\nyour Hype Resources. For example:\n\n```javascript\n{ id: 'drop1', bg_off: 'drop1_off.png', bg_on: 'drop1_on.png' }\n```\n\n#### Step 2. Make your elements draggable\n\nOn each draggable element, open the Hype Inspector and add two `On Drag` actions:\n\n1. `Control Element Position` to enable drag and drop\n2. `Run Javascript` and create a new function\n\nCall the following in your newly created function:\n\n```javascript\nhypester.drag_handler ({\n\thype: hypeDocument,\n\telement: element,\n\tevent: event,\n\tcorrect_answer: 'drop2',\n\tcorrect_timeline: 'correct',\n\tincorrect_timeline: 'incorrect',\n\treset_timeline: 'reset_drag1'\n});\n```\n\nThe `correct_answer` is the ID of the dropzone or list of IDs of the dropzones\nthat are considered correct choices. To specify a list, set it to an array, e.g.,\n`['drop2', 'drop3']`.\n\nThe `correct_timeline` is a timeline that is played when the user drops an element\nonto one of the correct dropzones.\n\nThe `incorrect_timeline` is a timeline that is played when the user drops an\nelement onto one of the other dropzones.\n\nThe `reset_timeline` is a timeline that is played when the user drops an element onto\nanywhere except one of the correct dropzones to reset its position. At keyframe 0,\nthis timeline should pin the `Origin (Left)` and `Origin (Top)` properties to its\ninitial location in the scene.\n\n#### Step 3. Check if the activity has been completed\n\nIn the last frame of your `correct_timeline` timeline(s), add a Timeline Action that\nruns a new JavaScript function like this:\n\n![Timeline Action](https://raw.githubusercontent.com/jbroadway/hypester/master/docs/pix/drag_completed_action.png)\n\nThe function should contains the following code:\n\n```javascript\nhypester.drag_completed (hypeDocument);\n```\n\n\n\nThis will trigger the `completed_timeline` from `hypester.init()` only when all of\nthe draggable elements have been dropped on the correct dropzones.\n\n### Injecting dynamic text into Hype activities\n\nTurn your Hype document into a template with dynamic text, image sources, and even\nform fields.\n\n#### Step 1. Add your template tags\n\nThe text for a given element should contain a tag name of your choice in the form:\n\n\t{tag_name}\n\nThis can also be included in image source fields:\n\n\t\u003cimg src=\"{photo}\" /\u003e\n\nAnd in form input values:\n\n\t\u003cinput type=\"text\" name=\"input\" value=\"{input}\" /\u003e\n\n#### Step 2. Create the `hypester_labels` object\n\nCreate a JavaScript file named `hypester_labels.js` that contains the following:\n\n\tvar hypester_labels = {\n\t\ttag_name: 'Hell World',\n\t\tphoto: '/files/photo1.png',\n\t\tinput: 'Placeholder text...'\n\t};\n\nLoad this file into your Hype resource library.\n\n#### Step 3. Call `hypester.init()`\n\nIn the first keyframe of the main timeline of your first scene, add a Timeline Action\nthat calls this:\n\n\thypester.init({hype: hypeDocument});\n\nIf your `hypester_labels.js` file has been included, previewing in the browser should\nreplace the tags for you automatically.\n\n#### Step 4. Interacting with the Hype document\n\nIf you want to update a value in `hypester_labels`, use the following:\n\n\thypester.update_element ('tag_name', 'New value');\n\nThis will update the value and propagate the change throughout your Hype document.\nIf you do update the `hypester_labels` properties directly through some other means,\nyou can propagate the changes across the whole file via:\n\n\thypester.update_elements ();\n\nYou can also create instances of the `HypesterElement` class that represent elements\nthat should always print the latest value of `hypester_labels.some_property` via:\n\n\tvar alert_msg = new HypesterElement ('alert_msg');\n\nFor example:\n\n\tvar hypester_labels = {\n\t\talert_msg: 'The sky is falling'\n\t};\n\t\n\tvar alert_msg = new HypesterElement ('alert_msg');\n\talert (alert_msg); // The sky is falling\n\t\n\thypester.update_element ('alert_msg', 'Everything will be okay';\n\talert (alert_msg); // Everything will be okay\n\t\n\thypester_labels.alert_msg = 'The sky is falling again';\n\talert (alert_msg); // The sky is falling again\n\nA HypesterElement object can be used in place of any JavaScript string to keep its\nvalue updated with the latest `hypester_labels` value every time it's referenced.\n\n-----\n\nBrought to you by [The Campfire Union](https://www.campfireunion.com)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjbroadway%2Fhypester","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjbroadway%2Fhypester","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjbroadway%2Fhypester/lists"}