I have questions about the best way to implement something. This involves CSS, HTML and Javascript.
My intent is to write something like a list of preferences (How much you like drama from 1-5, romance from 1-5, action 1-5) that's editable client-side, shareable client-side, and comparable client-side (add "thriller"; show off your ratings; compare someone else's ratings with yours). I'd ideally like all of this to take place on a single page.
My interpretation of how to handle the list itself has been through radio buttons and labels. Right now it looks like this:
My interpretation of how to do the self-editable part is to have a text field on the page with a button that updates the page based on the text inside the field.
However, before I get too deep I want to make sure I'm not approaching this all wrong, and I'd appreciate input on how to do the next bits. Specifically: how should I implement sharing and comparing lists? My instinct was to follow through on my forms but anything with GET will lead to one mess of a url and anything with POST, as far as I know, won't be accessible in the way I want it.
If you can shed some light on this problem, I'd be very grateful!
Related
I have some text I'd like to publish, but feel like the "ebook file format" route is just too ridged and doesn't add much, considering what it asks of the user (install reader, download, open... Try another reader... Use iTunes to transfer a file...)
For my purposes, I think it'd be nice to try to create a minimal "browser-native" ebook reading experience. I have book-like content that is formatted in a pretty obvious way. Forgetting about chapters and all that, just imagine a long series of html paragraphs of varying length.
What would be cool is if I could have a <div> to contain the "page" (sort of the book "view port"), and have Next/Previous buttons that scroll through the text one div-hight at a time, without any animation (so it looks like you are flipping pages and not scrolling.)
I worry about lines of text being cut in half instead of dividing the text at per-line boundaries, which I bet is a fixable problem!
Any ideas about how to do this in a clean, minimal way, or maybe suggestions for "frameworks" that exist for this purpose? I'd also be open to an in-browser (e.g.) ePUB viewer if a good something-like-that exists.
If you are really open minded and creative, I would suggest you to try or use as insipration the navigation of "RevealJS".
RevealJS
https://revealjs.com/
(It can be used without the Slides software, you can use it completely programattically)
Usage Examples:
https://cgi1.gitlab.io/g2scoring-presentation/
https://www.jmrenouard.fr/sshcookbook/#/13/1
(Use Arrows, Press ESC, Click, Press M ... All of those, can be customized)
First of all, the question should be a bit bigger but that is the main point, I guess.
Let me explain a little of what I want to do so you can have a better idea. Basically, id like to make a card game (no 3D nor 2D graphics), just a basic form where I have a deck of cards loaded in memory. After playing a card i'd like the form to update some information (labels, images, or X behavior) based on the card's effect, however, I don't want to hard code the card interactions/effects within the card control, I want to get all that from a script (for example a lua script). For example:
I have a script named "0001.lua" and it has 2 effects coded;
Deal 2 damage to opponent.
Deal 4 damage to opponent and destroy this card.
In the game I draw a card with ID 0001 and play it. When right clicking the control that works as a card, id like to display a list the effects in the script and depending on the chosen option to execute the selected function inside the script and update the information in the form (if it was effect 2 - deal 4 damage and destroying the control/card).
with all this in mind id like to ask the following questions:
How can i achieve something like that?
Is that called "embedding"?
In the information I mentioned lua as the scripting language but I don't know if that is the simplest scripting language i can use to do this, is there a simpler scripting language? I would like to keep it as simple as possible.
Can anyone provide an example to do something like this? I'll greatly appreciate it (it's okay if it's simple, I just want to know how to accomplish the back and forth communication between the script and c#)
Also, c# is no a requisite. I just mentioned c# because I feel comfortable coding in it. If there is another language more appropriate for this task i'm open to suggestions.
I think that it is much more simple to use C# scripts from C# than lua.
Check out these questions
[1],
[2].
Note: Don't forget about namespaces. If you want your scripts classes to inherit your classes or interfaces from main application, then your scripts should use same namespace.
I'm looking to put together a dynamic Web form where, when the customer selects options from a series of radio buttons, additional items will be added to the main image.
Think of it as if you had a Photoshop layer and all the other layers above could be hidden or revealed dependent on the customer's input on the form.
So, two questions...
I assume I should be using JavaScript for this form. Being a beginner with JavaScript, is there a way for me to tell it to change the image based on multiple inputs selected by the customer? The base image would be the same but I would be looking to hide/reveal multiple "overlays" on top of the base image.
Is this something that React can handle or should I be looking at something like Angular?
Thanks for your assistance with this question!
I can answer for number one by providing a live example: http://codepen.io/zvona/pen/mVQWvX
It consists of three components, FormControls, Blocks and App. Names are quite self-explanatory and so should be code itself. There may be some minor mistakes in code since it's quite quickly written on the fly, but it should give you insight on how this can be achieved with React.
I'm not sure if javascript is the best solution but here's what i want to achieve.
The web page is divided in 3 columns...
The left column should have links in picture format like Arts, History, Science etc
Clicking on any of these link should generate a series of links in the rightmost column say clicking on history should generate links for Civilization, World war etc Science should generate links like Physics chemistry represented by pictures etc and so on
Finally Clicking on these links say World war should display the content in the central column giving a brief history on World war....
Also each time a user clicks on an image link say Science it should get highlighted so the user can navigate easily from one topic to another.
I'm a novice to programming, not sure if javascript is the best approach. Also I'm very confused as to how to go about this problem where to begin and how. Any help in terms of code chunks or references or algorithms or advice on how to approach this problem would be most appreciated. If solving this problem means learning a new programming language i'm open to try.....
In case if i'm not clear in explaining the problem let me know
JavaScript would be appropriate for this. The appropriate approach will depend on how much content you have.
If it's reasonably short, you can achieve all of this by simply changing the display property on your elements (use JavaScript to set the CSS of certain page elements to show (display:block) or to hide (display:none).
If you have pages of text, you may want to look into Ajax. It is a bit more advanced that simply showing and hiding elements that are already there.
I'm often conflicted about how to approach this problem in my applications. I've used any number of options including:
A generic multiselect - This is my least favorite and most rarely used option. I find the usability to be atrocious, a simple mis-click can screw up all your hard work.
An "autocomplete" solution - Downside: user must have spelling abilities to find the damn values they need, aren't exposed to ones they may not have in mind, and the potential backend performance of substring searching.
Two adjacent multiselects, with an add/remove button - Downsides: still "ugly" imo
Any number of fancy javascript solutions (http://livepipe.net/control/selectmultiple, http://loopj.com/2009/04/25/jquery-plugin-tokenizing-autocomplete-text-entry/, etc.)
I haven't been able to find any usability studies done on the best approach to this problem. Many of these alternate solutions are great when you're going from <10 elements to a hundred, but may break down completely when you are going from a hundred to a thousand.
What do you guys use? Why do you use it? Can you point me to usability case studies? Is there a "magic" solution that has yet to be discovered?
My advice is don't use generic multiple select controls. I've been running User Experience Research for my whole career, and every single time I test a site with multiple select controls, it always turns out to cause problems for end users.
I did a post on this a while back: Multiple Select Controls Must Evolve or Die
Sounds like you knew this anyway, though. Your real question is "what do I use instead?" Well, to answer this question you have to work out whether the user's task leans towards recall or recognition.
(i) By recall, I mean the user knows what they want to pick before they have even seen the list. In this case, it's probably easiest for them if you offer an autocomplete tool (as used very effectively on facebook, for example). This solution is even better when the list of options is also impossibly long to present on a page (e.g. location names, etc).
(ii) Moving on to recognition - by this I mean a task that involves the user not knowing what they want to pick until they've seen the list of options. In this case, autocomplete doesn't give them any hints. An array of checkboxes would be much more helpful. If you can show them all at once, this is helpful to the user. Scrolling DIVs are more compact but they create a memory load for the user - i.e. once they've scrolled down, they have to remember which items they picked. This is particularly evident when users save a form and come back to it later.
So - thinking about your problem, do you need a solution for recall or recognition?
I can't point you to any case studies, unfortunately, but what I can tell you is that I personally prefer large checkbox arrays in two-to-five column layouts. Sure, they take up a lot of space, but they are extremely precise and uncomplicated.
I think for any control - be it basic multiselect, double list, checkbox array, or any other solution - once you go over a certain threshold of items it's going to be challenging for the user no matter what.
Have a look at Dojo Toolkit's DataGrid control. It's by far the most flexible and powerful, and supports multiple row selections. It also has accessibility features built in.
The ExtJS library has some really good solutions for your issue. There a bunch of user extensions for neat-o combos and multi select boxes.
If you want a combo select list, you can add query searching and pagination, plus design the resulting drop-down using easy templating, like in this example:
http://extjs.com/deploy/dev/examples/form/forum-search.html
Here is a nice multiselect, in the style you seemed to describe:
*(main_site)/learn/Extension:Multiselect2
You can find all user extensions here:
*(main_site)/learn/Ext_Extensions
Plus, you can easily include it into an existing web page without alot of extra overhead. ExtJS's full stack is quite large, but to get only the JS files you need, they provide a nice builder tool to grab just those parts you need:
*(main_site)/products/extjs/build/
Just a warning: ExtJS has just released 3.0, but I'm not sure the user extensions have been upgraded. The "forum-search" was taken from a 3.0 example though, so it will work just fine with the latest and greatest.
(*) Apparently new users can only post one link...