I have to load multiple answers when user click a question.There are multiple questions and each has multiple answers.but when i click second question,the answers of first question are also changing.
I have assigned div id dynamically from my controller in ng-repeat,but when i load data into the div,it always loading data into the first question answers div.div ids are unique in ng-repeat but answers of every question are displaying in all divs.
Sounds to me that you are using the same ng-model for both questions. If you link some of your code I could better examine it.
Use
$('#QuestionID').find('#answerId');
select answer id inside particular question instead of directly taking
$('#answerId')
Related
With reference to this code,if I am having three columcolumns (eg: including mrks after sub and the mrkd also have different number of rows like subjects.What change should I do now?
add multiple rows in one column using angular ng-repeat
I have updated the fiddle mentioned in the answer of mentioned question.
I have just added below code in html :
<td>{{subject.mark}}</td>
And added the mark in users object.
Please refer UpdatedFiddle
I am developing a ReactJs quiz app in which I am having problem with validating the answers that is in the json.
I did this quiz app using react version 16.8 using state components and fetched the json data and stored in state using map function I have the completed the view part, now I started to validate the quiz and I am struggling in that part.
here is the full code:https://codesandbox.io/s/mystifying-firefly-2d2x5
and also ill add my json link: http://myjson.com/kpop9
I want the answer should be validated, and if user clicks the submit button before attempting all the questions it should show that you have unanswered questions and if user clicks submit after attempting all the quiz it should display the total marks that user got.
Replying to your comment from above, here is your sandbox code slightly edited. You can submit an answer at any time and these are the alerts you should see:
When you don't select an answer: Alert with message No nulls
When answer is wrong: Alert with message wrong
When answer is correct: Alert with message correct
Here is your edited sandbox
The solution provided is only example, and should not be treated as a perfect solution, it's only to give you an idea of how this may work (you may still want to implement the bit, when after submitting the last answer, scores are calculated - for that you may want to store scores)
Explanation:
In this example I decided to add selected_answer variable in the index.js that stores currently selected answer on the form.
Next, I created setAnswer function in index.js which accepts a selected answer as parameter and sets the selected_answer in state to whatever is passed in. You are welcome to implement as many checks for the value that is passed in as you want
setAnswer function is then passed to your Answer component, so when the value is changed, it can be saved inside index.js state
Result component receives the index.js state as a prop. This allows it to have access to current question, the array of all questions and currently selected value
Inside Result component there is a validateAnswer function that is triggered when submit button is clicked. Inside that function I use the props.current_question (which is the index of a question) to extract the whole question object from your JSON file. Next I filter over the array of answers from previously created question object, and I extract the one that has is_right set to 1. Finally, I check if the props.selected_answer is empty, and display a message if so. If it isn't, I check if it equals to the value of previously extracted correct answer object. And voila!
As mentioned before, this is not the best solution, but one that works on top of your code without changing much. Please let me know if you have any further questions, but hope that helps a bit.
https://gist.github.com/djdaniels90/948704c58242c4bb08b5
I am having trouble with a dynamically generated quiz structure. I am aware of $parent. scope. I have attempted to implement it but the form is still not working as desired. I have linked the gist site; any help on this would be greatly appreciated.
Each question is a form in itself and the entire quiz is a form of question forms. Each question form contains x number of possible answers. Furthermore, a quiz can have y number of questions. Therefore we have a loop within a loop; ie: we are creating some nested child scopes.
Ultimately, each question can only have one answer, ie: only one checkbox can be clicked for each subforms. I can rather easily hack together a method using pure JS or jquery to grab the form elements but I know there is a way to do this in Angular, I am pretty close I believe but can't get the last little bit. Ideally, I would like either the questions to update corresponding models, which could be created in a array within the controller. Or the form submit action to upload the entire quiz data.
Any help on where I am going wrong would be great.
You are missing one attribute and need a variable for assigning answers to.
The NAME attribute takes care of the grouping and the model cannot be the question object itself, but rather an attribute of the question itself.
<input type="radio" name='{{question.question}}' ng-value="{{answer}}" ng-model="question.answer">
Here's a working version:
http://plnkr.co/edit/fACdq8DGvJel9An87GyA?p=preview
OK, I'm very new to AngularJS. I'm converting a rather rough-app (that I've been writing for a couple of days) from using mostly jQuery over to using Angular. [ I discovered Angular "mid-stream", while researching how to alleviate all the bookmark and back-button headaches I was running into.]
On my main page, I have a table of search results. (If the user arrives without passing any parameters, a default search is called to build the table. And, of course, they can use a search form on that page to show themselves a different set of results.)
Now, when the user clicks on a table item, I want that table to more or less "become" a drop-down menu on the Item Details page that can be used to navigate from one table item to the next. (The list will usually be less than 20 items long at any given time.) Same data, same sort order, just in a different control.
Rather than build that "Child" page so that (in addition to making Ajax calls to pull up the item details) it runs the exact same query AGAIN and then builds a drop-down out of it... I thought perhaps there was some more-efficient way to do it.
Perhaps, pass the entire object of objects from the search results on to the Details controller? (I would somehow have to also pass an id for whichever item the user actually clicked on for details as well.)
[With jQuery, I had been building both the drop-down and the table of results on the same page...and then just use show() and hide() to alternate which one I was displaying. And I would fetch the Item Details data and populate/show hidden details divs whenever a table row or drop-down option was selected.]
First I think you should use some kind of routing, maybe this can be helpful
https://github.com/angular-ui/ui-router
And second one, if you want to access same object with multiple controllers, you should use factory with your object, and all you need is to inject that factory into your controllers, and you will have access to the same object from multiple controllers. Here is the short tutorial, it's very easy to understand:
https://egghead.io/lessons/angularjs-sharing-data-between-controllers
And third option, but it's not nice, is to emit or broadcast event and send object from one controller, and in another one you can put a listener for that event, here you can find more information:
http://www.theroks.com/angularjs-communication-controllers/
http://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/
I am creating a survey app. In this a question can have multiple answers. So I am storing answers in a collection. I am using Backbone.CollectionBinder to render views by passing view class. Each view have "Remove Answer" link.
Lets say there are 3 answers added to collection. Now if I remove 1st answer it always gives me last model in that view class. So the problem is it always gives me last model inside answer view.
We need some more information. The docs (http://backbonejs.org/#Collection-remove) state that the removed model is returned from the collection. I've used it heavily without issue. It sounds like your reusing the same view or iterating incorrectly. Please post some code.
I got the answer of my question from following post
http://lostechies.com/derickbailey/2011/10/11/backbone-js-getting-the-model-for-a-clicked-element/