I would like to create an application that accepts response from a user in terms of button presses. As part of this project, i want to create a grid of 3x3 or 4x4 grid of big buttons equally spaced and equal sized and which will have labels containing a combination of two alphabet between A-D e.g. AB, AC, BC etc in a random order
I can create buttons in html but im fairly new to coding so things that may seem obvious are probably difficult. The functionalities i want includes recording start time a grid appears to when a target button e.g. DC is pressed (stop time), trigger when the grid appears (new grid of buttons), randomise the appearance of buttons on the grid, have one consistent target button to be pressed on all interfaces.
Has anyone done this before or can anyone share a stripped down example. Can someone point me in the right direction in terms of documentation or coding environment that perhaps I skipped over? Any comments or code will be greatly appreciated.
Thanks in advance
JavaScript Tutorial should be a good starting point: http://www.w3schools.com/js/
Also http://jsfiddle.net/ is good tool to play with the code you write
Related
Context:
I have cards that will be overlaid on a grid system to represent a time shift. The top part of the grid will pertain to certain time frames ( 1 pm 2 pm 3 pm etc. ) and the side will pertain to the people assigned to the shift. The cards normal state is just with a green top border. However when the person is on a break, I'd like for it to be blue, and when the person has been over scheduled, i'd like for it to be red.
I have to check the different break times and criteria to dynamically place the blue and red sections of the card.
What I've tried:
I've experimented with creating separate cards for each situation and stitching them together, but its not working cleanly. It is done using flex css.
I'd like to be able to just dynamically change only part of the card to the desired colors instead of stitching them together just because its seems more intuitive to me but I can't seem to search the right thing on google if it even exists.
The general question is what is the best way to go about this?
EDIT:
The final product would look like this.
I would suggest looking into ng-class as it sounds as though it would suite your requirements.
It would allow you to do something like;
<div ng-class="{'break': userOnBreak}">// code</div>
Edit: userOnBreak being the variable stating wether your user is on a break or not (boolean).
I would like to generate a dot grid background with javascript, WITHOUT using canvas or a repeating image; they just won't work for this use case.
I want to create a grid that I can snap elements to (I have this part figured out, there's plenty of examples out there) but I want that grid to be a dot grid and not a lined grid. I would like the user to have the option to easily adjust the size of the grid. (20x20, 80x80, whatever they would like)
Does anyone have an example they are willing to share or maybe an explanation of the concept to point me in the right direction so I can research the right things? My searching so far has come up very lacking.
I asked another version of this question on the gamedev.SE site earlier today but figured I could get better answers here. Also reformulated the question some. I hope this is okay couldn't find anything prohibiting it in the FAQ
I'm playing around with making a puzzle game, haven't done that much before I run into my first problem.
Question a) Basically, I want to create a certain amount of the same object/function (a ball). But the objects will be created dynamically (since the amount of balls could range from 3 to 25), preferably with a for loop pushing the different balls to an array.
However I'm not experienced enough to figure out a good way to do this.
Also, once I have my array of balls on the canvas, I want to be able to select one of the balls.
Question b) How do I know/determine which ball in the array was clicked?
Is a simple for loop enough and accessing the objects with [i]?
I made a jsFiddle example of what I want with 1 ball (you need to click the orange ball to select, then you can move it around by clicking anywhere on the canvas).
This is what I want to do, but with more balls, and the amount of balls is not specified (deciding the amount part i got covered). How could I solve this in a easy way?
Help appreciated.
Using a for loop is fine for your object generation.
As for detecting when you click an object in the canvas, this tutorial might help. It appears there is no built-in feature for tracking objects in your canvas - you simply do manual hit detection based on the common pixels under your mouse and object
Hope that helps
Paper.js has great DOM model, and out of the box ability to click and select items
http://paperjs.org/tutorials/project-items/transforming-items/
hit testing:
http://paperjs.org/examples/hit-testing/
I've been gathering ideas for my personal project in CSS/JavaScript/XHTML.
The idea is to replicate this:
And so far I have this (I know it's far away from what I need, but just playing around)
http://jsfiddle.net/dburelax/XY8CA/9/
I was wondering if http:// processingjs.org/exhibition/ is my best choice to get this done in javascript? Thanks
P.S: I have no idea how to make the character move within the tiles any suggestions are welcome :)
I'd say light years away. But don't take it as sarcasm; let me explain.
What I see when I look at the gif is an engine that supports block "primitives".
Because, you see, every time he hovers a tile with the pointer it gets decorated with a white border.
In your case, you just have two images:
A map background
A gif of sprites for the character (without his back or sideway, but let's just forget that for now).
With these two in order to achieve the block highlighting you should always calculate offset, and apply image filters on the background with the border decoration (and shadows and what not). Then, when moving outside the box remove decoration the last window.
After that what do you do if you change box size? Recalibrate all offsets? What if you have boxes/bocks (I'll call them interchangeably now) in mixed sizes?
In game engines particularly you have primitives such as boxes, where you can detect collisions and either allow passage or not from the colliding box (a character is a box as well). Think how this would be practical if you for example had "fog of war" and allowed vision only in adjacent boxes.
It's not just about processing.js, which may or may not be helpful to you, but there are key bindings, character movement, character orientation to be thought about first.
I don't know about you, but I wouldn't be able to encode all that information in Javascript objects and still have it performant. Not with current Javascript engines, at least.
While your hobby project is a fun idea, there is much much more you have to learn first to be able to pull this off.
In the case I have offended, take but this and all is mended -- The Goblin
If this is in the scope of learning programming, while having a project to keep you motivated; then go for it (use the path I've deemed hard), learn first how to move images on the HTML5 canvas and when having actual code problems come back.
I have a 2 column table in a database 1,000 rows long(All integer data).
The display will allow for the user to delete a certain range of data from the table.
What I am looking for is a creative way to display all the data so the user can get to different parts of it really fast. Maybe displaying different chunks at once, represent with bar graphs or zooming the scope in/out would be really cool.
Any ideas,suggestions, examples at all are appreciated. Please just throw them out here for brainstorming.
Note: I am limited to JS, xml, html and C
Thanks!
By mouse scroll resize the text.
Add drag'n'drop for moving text block.
Example: user resizes it to a smaller chunk by mouse weal then moves it by using drag'n'drop.
It is possible to implement such thing with jQuery/JavaScript
Use a double slider with a min and max display range. Here is an example of one based on MooTools. Moving the slider controls will adjust which range of values are displayed in the table.
Could implement something that functions like google maps where you can easily zoom in and out and set points wherever you need that stay when you change elevation.
you can format the html with <h1>, <h2>, <h3> and <p> tags, and use jquery to collapse the paragraphs, leaving headings of major sections.
I did this with documentation i was working on and it worked out great.
I'm a fan of the JavaScript bookmarklet demoed in this video: http://www.youtube.com/watch?v=GPZ8YNgyl_I
The bookmarklet itself is available here: http://t_trace.wed.macserver.jp/overview.html
If you have used WinMerge, you could develop something like the location pane in the left that shows a full preview of the changes in files. It can be used to navigate very fast
Here's a screenshot. (Image too large to inline it here)
Assuming the integer data come in ranges, a common approach is to show how much data there is in each range as a horizontal bar. You click the range to zoom in, until you see the actual data, or click the X to delete.
ID Range
[X] 1-1000 xxxxxxxxxxxxxxxxxxxxx
[X] 1001-2000 xxxxxxxxx
[X] 2001-3000 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
A further refinement is to use colour on the horizontal bars to show data density. For instance red = lots of data, yellow = less