Assume, I have a user page where user can select a subject to learn and a button to upload questions as well.
Basic View Of a Subject Page - User selects a subject and got a view like in the fiddle
<div class="dataContainer">
<div class="clsContextContainer">
Chapter1
Chapter2
Chapter3
Chapter4
Chapter5
</div>
<div class="clsContentContainer">
<div class="q"> Q: Question goes here
<div class="c">C: a) choice1 b) choice2</div>
<div class="a">AnswerButton</div></div>
<div class="q"> Q: Question goes here
<div class="c">C: a) choice1 b) choice2</div>
<div class="a"> AnswerButton</div>
</div>
</div>
</div>
I have shown a simple page of what I want. My doubt is how to design this page so additional question will be automatically added.
Solution1
User uploads single question or a file which contains list of questions. One of the administrator approves it[Not a duplicate question, valid one], Then it should be added to this subject page.
I can use handlebars.js and where I can maintain a template like I shown in the fiddle and a context page. Once one of the administrator approves, I can add new question(s) to the list of available contexts.[MODIFYING A FILE IN THE SERVER] So when user renders the page next time, new question will also be added.
My Doubt - Is it safe to modify a file in the serer through script?
Solution2:
I can maintain a table in the server questionsSubName. User adds new question(s).Admin approves it. So add that question to the table in the server.
While rendering, read questions from the db, then render it.
My doubt: I don't feel its a feasible one, since querying db often is not the best way for this kinda situation.
Solution3
I can have lists of files as shown in the fiddle [anchor tag]. User adds a new question. Admin approves it.
(i)Manually creates/modifies the files which corresponds to chapters. create - I want to limit 50questions per chapter. If one chapter reaches 50 questions, I need to create another. So create comes into the picture here. If a chapter has less than 50 questions, modify it.
ii) Do it through script.
But I am not sure whether I am doing it in the right way. Please suggest me what way I can do or Is there any other framework which can help me in this situation.
EDIT
After reading comments, handlebars js with tables is the best solution.
<div class="q"> {{{Question}}}
<div class="c">{{{Choices}}}
<div class="a">AnswerButton</div>
This could be my template page.
Context page will be like
{
Questions:[
{Q: questionString, C: ChoiceString},
next one
]
}
I have to read set of questions from the server, for eg: I have 5 chapters for a subject and 220 questions in the table.
Table format:
Question Id Column
Question Column
Choice Column
Answer Column
So If user clicks chapter1, I will read first 50 questions from the table and make a context, then render it. If user clicks chapter5, read last 50 questions and rmake a context, then render it.
Is it feasible?
Related
I've been looking for a good how to on this topic for the last 4 days and could not find any. Even worse; I'm not able to think of a good description of what I'm trying to achieve.
For example Dropbox has the functionality of what I would like to implement on my own website. If you login into dropbox you can upload files. When you upload files one by one the UI stacks the results (filename, location, etc.) into a div element. There are other websites who also do this; Namecheap, for example, when you search for a domain and click add to cart you see the domain show up on the right side, where you have the option to delete it.
What I would like to do:
Have a page with a search box that queries my database for objects and displays the results into a div element below. Everytime the user does a new search the results in that div element will change. But if the user clicks on the 'add to' button the object must move from the search_results div element to another div element on the same page where all the previous selected elements are also listed. The user is then able to delete the object from the list or alter the values of the object such as the amount.
Like I said; I've been pulling my hair out because I cannot find it... I'm feeling really stupid right now :( Does anybody know what the technicall name of such a functionality is?
EDIT
The comment below from Quasimodo's clone and yuriy636 pushed me in the right direction. After searching with there terminology I've found this page:
https://cartjs.org/
The second example is exactly what I was looking for. However I'm not able to upvote a comment but I do like to give credits to both for helping me out!
Your question is quite vague but I think what I've done below can at least nudge you in the right direction.
Let's say you have something like this - a div to hold your search results, each of which is it's own div with class result, and a separate div to hold the 'moved' ones:
<div id="searchResults">
<div class="result">This is one search result.</div>
<div class="result">This is another result.</div>
</div>
<div id="chosenResults"></div>
Now, we can use JQuery to put in the "move" functionality:
$(document).ready(function() { //On page load
$('.result').click(function() { //When element with class "result" is clicked
$(this).detach().appendTo('#chosenResults'); //Remove it form the results list, add it to the other
});
});
Here it is in action: http://codepen.io/anon/pen/GqBxEp
I'm not sure where you're at in regards to the actual data retrieval, etc, however I figured knocking out the front-end as I have above may be useful for you.
I've heard the term infinite list and infinite scroll, Wikipedia uses 'lazy or delayed evaluation': https://en.wikipedia.org/wiki/Lazy_evaluation#Delayed_evaluation
I have a problem with some data I want to use as part of a signup form in angular.js. I have the form split out into multiple "steps" - such as company account information, then admin user information, and finally, payment information. This is common in many web applications, so I know it has to be possible.
I have three divs which house each section of the form, as follows :
<div class="lc-block" id="l-register1" data-ng-class="{ 'toggled': lctrl.register1 === 1 }" data-ng-if="lctrl.register1 === 1">
<div class="lc-block" id="l-register2" data-ng-class="{ 'toggled': lctrl.register2 === 1 }" data-ng-if="lctrl.register2 === 1">
<div class="lc-block" id="l-register3" data-ng-class="{ 'toggled': lctrl.register3 === 1 }" data-ng-if="lctrl.register3 === 1">
As you can tell here, these three sections are hidden and shown, based on some ui interaction which changes the valus of variables to make a given "step" appear.
So here is my main issue : I want data from a model in "l-register1" to still be available when I am on the third step, for example, if I have the following input field inside "l-register1"...
<input type="text" class="form-control" ng-model="client" placeholder="Company name">
... and I hit "next" - I would like to still be able to retrieve that data during steps 2, and 3 - as I will obviously need it after all the data is in place, to send it off to my API (which I already have working)
Any help with this would be awesome, I have been banging my head against a wall all day, trying to get this working!
Just put all your ng-model and associated variables in one controller and you can hide and show your different div's based on conditional variables. Thus, as you put all your variable references within one controller it will automatically preservers the data associated with it. Also if you would like to use different controllers for the different page than you can also achieve the same. In that case you need to make service and share the data between two controllers. Just build the service which maintain your shared object and the controllers will handle with the reference. I have explained more with detail information here. In totality that's what whole angular is all about single page application.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
My apologies in advance if I posted this in the wrong place...
OK. I'd like to add a similar hierarchical/selectable list of data to my website as can be found on ebay's "sell a new item page" here:
http://cgi5.ebay.com/ws/eBayISAPI.dll?NewListing
Note: you may need to be able to log into ebay to follow the link. Sorry
(I've tried to post a screenshot to illustrate the table for those who can't follow the above link, but as I'm a new user to StackOverflow I'm not allowed to post images until my Reputation > 10. Bummer)
If you can't follow the link above, goto ebay.com, login (if you have an account), click the SELL tab->SELL AN ITEM and then the BROWSE CATEGORIES LINK which will bring up the list in question.
Ebay uses their version to make sure a seller lists their auction item in the proper category and I could use something similar for completely unrelated purposes on my own website.
It works like this: upon page load, column 1 is populated with a list of possible category options and when the user selects one of those options, a new (the 2nd) column of sub options is then displayed to the right of the first. When an option from column 2 is selected, column 3's options are displayed and so forth until the user has drilled down into the categories and arrives on one which does not have any additional subcategories. Ultimate, a single category number is displayed in the lower right hand corner one the user reaches the end of the category line.
2 questions:
To help me research how it works, what type of list is it? (Assuming it is a list and not a menu ect.)
In order for me to make one for my site, will it require adding code in javascript or are there online generators to make such an animal?
I've inspected the page's source before asking the question, but being fairly new to html/php and not having dabbled in javascript yet, I drew a blank on how to learn more.
Knowing what to call this type of list will help me google to find out how to make something that looks and functions in a similar manner for my data which is currently in a mySQL table.
Thanks in advance for any replies!
This can be achieved in HTML and its called 'selection list' with this code:
<select name="items" size="3">
<option value="ball">Ball</option>
<option value="toy">Toys</option>
<option value="something">Something</option>
</select>
You can see it in action here:
http://jsfiddle.net/5EXmc/
Of course you are going to need some javascript to understand which item was selected.
If you are interested in the javascript for this to displace what you selected:
http://jsfiddle.net/5EXmc/1/
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
}).change();
If you took 10 seconds to look at the HTML you'd learn that it's just a select element with a size property. This is just another mode of the input element.
I'm trying to create a simple sorting option for posts in my blog. The problem is the last thing I want to use is a JS-based redirections because of the fact some users don't have JS enabled in their browsers, thats why they wont be able to sort posts in me blog. Let me give you an example:
I have several categories in my blog:
//categories selection
<ul>
<li class="active"><a id="cat1" href="/?category=music">Music</a></li>
<li><a id="cat2" href="/?category=photo">Photo</a></li>
<li><a id="cat3" href="/?category=cinema">Cinema</a></li>
<li><a id="cat4" href="/?category=computers">Computes</a></li>
</ul>
Also, I have two sorting options:
//sorting options
<div>
<a class="active">Last posts</a>
<a>Last comments</a>
</div>
Depening on current active elements, user is redirected on page with such parameters, e.g. '/?category=music&sort=posted' or '/?category=personal&sort=commented'.
For example, lets take that in categories selection 'CINEMA' tab is active at this moment (
<li class="actvie"><a id="cat3" href="/?category=cinema">Cinema</a></li>
). So, if user clicks Last comments link, it should redirect to
'/?category=cinema&sort=comments'
Another example: currently Last comments is active (
<a class="active">Last comments</a>
). User clicks on Computes in category selection and it should redirect to
'/?category=computers&sort=comments'.
So, are there any variants for performing such feature without JS? If no, could you suggest me the most elegant solution except manually running over every element in category and sorting optiona and generation link with JS/jQuery?
Thanks in advance!
SERVER SIDE:
db.collection("posts", function (err, collection) {
//getting posts dependinc on requested category
collection.find({category: req.query['category']}, {sort: [['time_added', -1]], limit:20}, function (err, posts) {
//getting posts and rendering page
});
});
UPDATE: I've found a so-so solution. For a separate category I render two div's with different posts list. One for 'Last posted', the second - for 'Last commented'. And the sort selector will just hide one div and shows another. The problem is just twice data size transfering to client side. I know, it will require a bit JS, but the main category links would be clear without '#'-hrefs. And sort options - it's just a toogle, it may not have real link.
Seems like you are doing a page refresh for selecting a new category. Use the selected category parameter to determine the URL of the sorting options. Would need some more code from your server side to give you a more concrete example.
If you don't want to use Javascript you will have to generate the href-attribute of your sorting links <a class="active">Last posts</a> dynamically based on which category is selected. How are you rendering the page today? Just static files? Have a look at a template engine like mustache.js and then you could do it like this:
<a class="active" href="/?category={{category}}&sort=comments">Last posts</a>
Have a look at this tutorial for an Node.js example using mustache.js
http://mrjaba.posterous.com/a-gentle-introduction-to-nodejs
Edited after your comment: Or something like this using EJS
<div>
Last posts
Last comments
</div>
Are you talking about doing the actual sorting on the client side or the server side? If the latter, there's no problem; just stick with the URLs you have and have the server rewrite them and redirect to the new ones (if you even have to do that; you could just treat the "shorter" URLs as the actual ones for the sorted content). This is no way relies on client-side scripting being available.
You can, of course, implement client-side sorting on top of this as a convenience for users who do have client-side scripting available; the key here is to use unobtrusive JavaScript (e.g. install handlers at load time to intercept clicks on the sorting links).
Im doing a survey application . It is having option to add questions.If on clicks on add button it will show the text box for adding question and a select box for selecting question type(radio button , check box) once it fill the field i will store than in database ans display in UI. then the user have option for adding question above and below. if he add question above i need to reorder the question number below. if he add question in middle i need to update the question number below that. how can i solve this situation ?
In a similar situation, I have shown the list of items to be sorted in a table/grid and given the option to the user to move up or down the items in the grid as per their choice. I kept a column for order in the grid (hidden in my case) and a corresponding column in the database table. Whenever there is a reordering in the grid, I update the order by a swap operation for the two rows that are swapping position. So, once the user has done the reordering and save the order using a button, I use to update the order column according to the order in the front page.
https://pixbyfunc.appspot.com/pub/asq/asq.html is a running example of a contingent questionnaire. A different set of questions are presented based on if the user likes wine or not.
It's designed using JavaScript that looks like:
Q().ask("Have you had your drink today?");
Q('like-wine').using('radio', 'Yes', 'No').ask("Do you like wine?");
Q('like-wine').matches('no').naming('reason').using('textarea').ask("Why not?").abort();//stop the survey
Q().ask("How much do you drink a day?");
Q('which-wine').using('checkbox', 'Reds', 'Whites', 'Other').ask("What do you like?");
Q('which-wine').matches('reds').ask("If you would like to receive a free bottle of Chateau d'Yquem Sauternes 2004 from your Santa, please provide your email.");
Q().start();
You can view the source to see how Q is implemented and to modify to suit your needs.