Any help would be appreciated -- I just started rails a few weeks ago and I'm pretty lost right now. So I made an app where people can submit questions, and those questions get randomized and displayed one at a time. I implemented this in a pretty roundabout way. I'm going to lay out what I did explicitly just in case.
I created a Question Model as well as a Question controller with new and create actions -- I put a form to submit the question in the view associated with the new action. To display the questions, I used javascript. I first used embedded ruby within the page to iterate through all the questions in the database. I then put them all in their own <li> and set the class of that to have a display: none. Then I used javascript to grab the class of the <li> tag and pushed all the questions onto an array.
Then, I just used javascript to display the question one at a time by updating a div element's html over and over again. Now, I want to add a simple rating system (like an +1 or -1 thing). I want to take people's ratings of the question and average them out. But I don't really know how to implement this. I THINK that I should have a ratings model that belongs_to the question model (which has_many ratings). There should be a ratings controller with an edit and update action that changes the score every time someone rates a question.
The problem is I don't know how to exactly implement this given what I've already done so far. A big problem for me is having the rating of the question linked to the question itself when I just used javascript to display the questions. Any suggestions? Apologies for the essay.
First of all, you should clarify what you mean by using JS to display your questions. It sounds like what you're doing is more or less right, if indeed you need to dynamically update the page through time, but it also potentially sounds like you just want to show a list of questions, which you can do with just HTML.
Second, you should decide whether or not you really need an extra Ratings model. It could be useful so that you can track things like when ratings come in, who made which ratings, and how it changes over time; but if you really just want to know the rating at any given time, you can just have an integer rating column on your questions.
Third, displaying your ratings just involves grabbing more info from the questions when you display them. Assuming you have an #question object in the view, and you were displaying its text like #question.text, you can do the same with the rating by doing #question.rating, or, if you go the model route, something like #question.ratings.count. From there if you still want to use JS to update the value you need to either just make a string or convert the entire object into JSON so that you can handle it in JS.
Finally, you mention needing a Ratings controller. That's fine, but recognize that you're going to need AJAX on your page to send events to that controller so that you can tie clicks (for voting) to actual database changes.
Related
I've started a new project to sharpen my Javascript skills.
The project (demo here) and (source code here) involves decision making and uses key skills taught in therapy for breaking down future actions, decisions, goals etc, assessing pros and cons and consequences (positive or otherwise). My idea was to see whether I could create an app ready-to-go to meet such needs/demands so that I can help people out there who want to take a moment to think about their next steps and whether it will benefit them, as well as myself.
As you can see from the app, you've got three steps to go through; subject, consequences, comments (on said consequences) and the final forth step is reflection. What I'm having difficulty with is getting all this together. I want to put the data into an array and then render (as well as save to localstorage) to the div container representing the reflection stage. Because the form is not straightforward in the sense that it's not simply getting values of input elements but instead 'linking' the option element value from the parent select element, I'm having difficulty getting all the data together.
How can I do this?
An example of what I'm trying to do:
let array = []
// Logic here
// User defines a subject to 'discuss' and then proceeds to select the consequences and then expands on these consequences. Finally, user goes to save this 'session'. It is rendered to the 'Reflection' container. Source code is available
array = [
subject: "A new job" // all examples here
options: {
advantages: "more pay", "people", "future",
questionable: "apocalypse?",
disadvantages: "traveling to work", "long hours"
}
]
I want the array to be updated dynamically. So, say for example the user adds another 'Advantage' along with some text, I want the advantages property to reflect the new changes without removing existing items. I don't want a new array being added. I only want one array because the intention is for this app to be a single session, not addressing multiple subjects to deliberate on. I have previously opted to disable the subject input element so it cannot be edited and 'sent' again to solve this but have settled at the minute with a basic conditional statement checking if the subject title exists in the array and if it does, attempting to work with the existing array. I've also tried doing a 'modular' approach by processing the form data one step at a time, much like a multi-step form while all on one page and without the dynamic content changes. The aim with this was to break down the collecting and manipulating of data. I hoped all this would make data manipulation easier but I'm still stuck at being able to create an array which can be used to render all the data.
I have come close to figuring this out as I've managed to create an array which resembles the data collected from the form but it isn't dynamic. The options property as mentioned above does not 'join/link/integrate' the data from the inputs for analysis (consequences). The options property remains the same in the array regardless of whether the 'consequence' is an advantage or disadvantage.
Have tried Object.assign, array.push, array.concat, new Object, for loops with conditional statements/switch statements etc.
I want my blog to be more interesting by making it different every time a reader reads a post. For example, I want to tell a story using a quote from a famous person, a picture, and a situation from the real life. Say, I have 2 relevant quotes, 3 pictures, and 10 situations to use. I don’t want to use them all together, instead, I want every item to be randomly selected during the page load, this will give me 2×3×10 = 60 different variants of the page. If I had a database-backed site, I would select them parts from a DB, but I like the Middleman much and the page must be static.
What would you recommend?
JQuery might be the lightest weight easy solution here. You could use JavaScript to randomly choose each element and place them on the screen.
If you wanted to make sure the person had a unique message each time, you could record the selected combination in a client side cookie so on subsequent visits, your code checks the cookie to make sure that the combination is different than the previous x number of visits.
Depending on how long those 10 stories are, I would say maybe the quotes and the stories could be downloaded as a compressed JavaScript file that contains the list in a JSON. When you set the img src attribute using JQuery, it should pull the required image down from the server.
It would be a small project for me to show you all the details here but hopefully I've given you enough information to help you get started. You may have to use Google to fill in for examples of random numbers in JavaScript, using cookies with JQuery, replace image using JQuery.
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've just started exploring using svgs within rails. I want to dynamically update a gagejs with the created_at column on my Comment model.
Is this possible? For example, if the user hasn't created a comment in x amount of time the gage drops randomly between a certain range. It sounds like a fun problem to solve, i just would like to know that it is indeed solvable.
Thank you.
You can use setTimeout to run something after a delay and DOM to update things dynamically. The links give you some examples of each so you'd just need to tie them together.
First off I'm open for suggestions of alternative ways of doing things.
To get going here is an image of what I want to achieve(kind of, sorry for the BAD paint job)
OK.. I have a request that gets fired off and sends back a ton of json containing information about Pupils Names, Sex, Age, Location.
I want to build a sort of table in the form of list elements, each tuple containing one unique student that the request returns.
I want to style it in a specific way, so it would appear as a row but each piece of data appears cellular, as in its a specific width with a border etc. As in each peice of data is a unique html element with a specific css style, but it appears to the user as a single row. (As in the 2nd and 3rd image in the drawing.)
Hovering over the data elements in a tuple(row) changes the hover state of all the cells in that row.
The end cell contains a plus..clicking this will update data in another div on the page. Whereas clicking the other cells in a row will take the person to another page related to that particular pupil.
Without using anything other than Javascript(librarys are okay i.e jQuery) and CSS how is the best way to go about this?
Is my thinking of how to do it okay or is there a better way?
Its also worth noting if my requests brings back 25 results, I only want to show 10 at a time but the person must be able to somehow view the remaining 15. How would I go about this also?
Thanks in advance.
I don't have the tools to test this at the moment, but it might work to set a hover property on the row-container, for example:
div.row:hover div.cell {
background: #006;
}
Or something like that.
For the part of your question about showing 10/25 elements...you could hide it with JavaScript and have a button to show them I guess, I'm not sure about why you are doing this. It might be better to implement something server-side if you want to paginate results.