Coder Social home page Coder Social logo

ucfopen / adventure-materia-widget Goto Github PK

View Code? Open in Web Editor NEW
2.0 2.0 5.0 38.11 MB

A flexible scenario-building Materia widget where participants follow branching decision trees.

License: GNU Affero General Public License v3.0

PHP 3.27% HTML 24.98% CoffeeScript 50.82% JavaScript 0.53% SCSS 19.88% CSS 0.26% Shell 0.27%
materia-widget

adventure-materia-widget's People

Contributors

cayb0rg avatar clpetersonucf avatar dependabot[bot] avatar frenjaminbanklin avatar gitnix avatar iturgeon avatar iveysaur avatar jaxbot avatar skeezyheat avatar weining-li avatar williamradfunk avatar zachberry avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

adventure-materia-widget's Issues

Improve deletion behavior of in-between nodes

In-between nodes are nodes created between an existing parent and child by clicking the "+" icon on the link. However, deleting an in-between node will also delete all children of the node, which can be problematic if that node was created by mistake or the user changes their mind.

It would be better if, upon deleting a blank in-between node, the tree was restored to its original state, with the parent once again linking to the child - instead of removing the node and all child nodes below it.

Suggestion: Add ability to embed YouTube or other video

Suggestion for your consideration: Any chance we could add the ability to embed media in, say, a Narrative node? Or perhaps add a new node type for YouTube, Vimeo, etc.? I know we wouldn't want to accept video files directly within Materia, but it would be nice to be able to embed streamed video.

Replace wonky "cold storage" feature with tree snapshots for history & undo

The "cold storage" feature for nodes seemed kinda cool but in practice became insanely complicated. It's probably better to strip this feature out and replace it with snapshotting the tree structure to enable the undo/redo option. This has the added benefit of allowing the user to traverse the history of changes beyond the most recent edit.

Validation screen rarely fails to appear on publish events

When publishing a tree in Adventure that has errors, the first time the save is intercepted, the validation appears normally (sometimes with a < 1 sec delay). If the tree is not changed - and not re-rendered - and publish is clicked again, the validation screen won't appear until the cursor moves and/or interacts with the widget window.

See: http://quick.as/kdg6hoyox

Since this is an extremely edge case behavior, I'm labeling it as "Let It Ride" until after Adventure 2.0's initial release, due to time constraints.

Add "restore" option for deleted nodes

A lot of frustration with Adventure right now has to do with accidental deletion of nodes or subtrees. Adventure already has a "cold storage" property that holds child nodes deleted intentionally (for the purposes of the undo option), but this could be expanded. In any case where a non-blank node is deleted, the parent can retain a copy of it, and we can add a dedicated "restore" option to review a list of a parent's previously deleted children.

Adventure Creator Answer Tooltips don't respect viewport edges

Most dialogs in Adventure have logic that prevent them from clipping into the edges of the viewport (e.g., displaying partly or fully off the right or bottom sides of the screen.) The answer tooltips, the little tooltips that display when you hover over a node that display all answers linking to that node, don't seem to respect the viewport properly.

Improve video scaling options

Related to #45, but with a specific focus on video - we've received comments that the video player is just too small in its current form. Ideally we could have a middle-ground alternative to full-screen, using a lightbox or something similar.

New Destination (blank) menu item in destination menu is confusing

  1. Open any node that's fully linked up
  2. click the destination node to bring up the popup menu
  3. The first (selected option) - New Destination (blank) is not clear

I initially clicked on it, thinking it would create a new, blank destination node. However, selecting it has no effect.

I believe it says this mostly because it makes sense when the node itself is new - it'll create new blank destination nodes for you - and it's the default option.

Suggest we find a way to make this less confusing when editing a node that isn't brand new.

@clpetersonucf suggesting this may be part of a bigger update dealing with how node selection for answers works:

Right now it's very unclear - there isn't any label or indicator, just a button with a letter in it

Adding in-between nodes should have a better UI

Right now, one simply hovers over the middle point of a node link to reveal the "+" button that lets you add an in-between node. However, this can often obscure other UI elements, and is generally pretty un-intuitive. A better solution may be to add a smaller, static "+" button in the middle point to make it clearer, and to improve how it behaves when adjacent/overlapping other UI elements in the creator.

Short answer nodes should be validated to ensure there's at least one possible answer

As part of this, making response submissions more intuitive would be helpful. Many people assume that simply having text in the input field for possible responses is enough. Perhaps auto-submitting any text in those fields when the user closes the window, or warning them that no matches were actually added. In any case, the validation logic should check for this.

Node reset should always display warning & provide undo option

Resetting a node will only display a warning if there is a (hierarchical) child node that isn't blank. Otherwise, resetting will happen immediately with no undo option, unlike node deletion. Should probably add a warning dialog regardless of children, and provide the undo option in the toast.

Optimize tree display above a certain node count

We're seeing a small number of instructors create absolutely massive trees, with literally thousands of nodes. As expected, the tree visualization is not built to handle trees of this size.

In terms of low-hanging fruit, there are a few optimizations we can apply:

  • Simplify node display styles to reduce rendering overhead
  • Hide subtrees beyond a certain depth, or allow subtrees to be minimized and expanded
  • Improve how node ID iteration works: right now we never go past double digits, so the biggest expected value is ZZ. Afterwards the first character will begin iterating through subsequent ascii values.
  • Improve zooming and panning functionality beyond a certain width
  • Perform preemptive tree traversals and warn the author if a given subtree is over a certain depth or a path is too long ("students will spend a long time in this widget, consider the time it will take to complete this widget")

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.