Simple slider rating system from 1-5 - rating

I was thinking about adding a rating system to my website, like a 5 star rating system but with a slider instead. (A simple slider with steps from 1-5). What's the easiest way to achieve this?

Use a normal range type input, set the range from 1 to 5.
<input type="range" min="1" max="5" step="1">

Related

Multiple Regex Validation against a value

I want to validate a text box input with below requirement
Text must be integer
Value of text must be between a predefined Max Value and predefined Min Value
** I don't want to use RangeAttribute.I want to use regular expression which I want to store in database and will get applicable when View will get rendered.
How we can do this in c# using multiple regex?
IF you want to restrict it in HTML, so you are sure the value you will receive is already a number you can do it like this:
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">
IF this is an MVC project, you should restrict this in your ViewModel by setting your property to be an Integer (int), use annotations to enforce things like
[Required]
or
[Range(10, 1000, ErrorMessage = "Value for {0} must be between {1} and {2}.")]
Depending on what your project is built in (Webpages or MVC) this can be done differently.

Pattern is not working for Positive Integer number in Angular 4 form builder

I am using Angular 4 and Reactive form (using form builder), I have one field in my form name Quantity of Products so we know that quantity does not contain Nagative value and floating value, please suggest me right pattern for that
<input type="number" formControlName="quantity" class="form-control">
this.myForm = this._fb.group({
quantity: ['', [Validators.pattern(/^[+]?[1-9]\d*$/)]],
});
I don't want to allow user to enter nagative value, zero, dot(.) and any other syboles like - and e.
I want only positive + Integer (whole number)
Thanks in advance
please help me

Format datetime-local in html5 to DD/MM/YYYY in date part and 24 hour in time part

I am developping a django project and use the element datetime-local in HTML like <input type="datetime-local" name="starttime" value={{startTimeString}}> and <input type="datetime-local" name="endtime" value="2015-07-10T19:00:00">, since I need a datetime range.
Its format on browser is MM/DD/YYYY hh:mm AM(PM), but in my country, The convention is DD/MM/YYYY and 24 hour format. How can I change it?
What I want to change is just the format of the element showing on the web page. and if possible to set the format of datetime-local, I prefer to not split it to two separate selectors: date and time.
Thank you very much for any idea.
It seems to me, you should make minor data settings in your code.
example: <p>Today: {{ Today|date:"M d, Y" }}</p>
Make time settings accordingly to this, too.
this could help you https://docs.djangoproject.com/en/dev/ref/settings/#date-format

Django - Better way to set checked checkboxes on a search form based on GET parameters

I've done a good bit of searching, but it doesn't seem like this particular brand of form creation is addressed anywhere.
I'm creating a search page that queries the database for the set of all elements which have attributes at or above a given threshold. Right now I have a simple form that has 5 attributes, which have 5 thresholds each, each with their own checkbox i.e.
attrib_1 X threshold 1 X threshold 2 X threshold 3 X threshold 4 X threshold 5
attrib_2 X threshold 1 X threshold 2 X threshold 3 X threshold 4 X threshold 5
... etc ...
The HTML looks something like this:
<div class= "form-inline">
<label>Attribute 1</label>
<label class="checkbox inline">
<input type="checkbox" name="attrib 1" value="1"> Very Negative
</label>
<label class="checkbox inline">
<input type="checkbox" name="attribt 1" value="2"> Negative
</label>
<label class="checkbox inline">
<input type="checkbox" name="attrib 1" value="3"> Nonfactor
</label>
<label class="checkbox inline">
<input type="checkbox" name="attrib 1" value="4"> Positive
</label>
<label class="checkbox inline">
<input type="checkbox" name="attrib 1" value="5"> Very Positive
</label>
</div>
I then search the database using the information in the GET parameters. When I display the search results, what's an elegant way to make sure the checkboxes reflect the search query? I expect that the user will check some boxes, look at the results, then check some more to refine the search and I don't want them to have to recheck all the boxes each time they submit a search.
I've considered a few way to do this. I could use if/else statements for each checkbox and fill in the checked attribute appropriately. This would work, but seems inelegant, not very DRY, and would result in a very complex template. Alternatively, in the view I could create a data structure (dict of lists or list of tuples, probably dict of lists), which would have either 'checked' or the empty string for each checkbox. This would result in a cleaner template, but I suspect there's a more properly Django/Pythonic way to do this. I also considered a custom form, but that seemed like trying to fit a square peg in a round hole.
So, what's an elegant way to make sure that check boxes on a search form are properly checked based on GET parameters?
I am assuming you are POSTing back to the page with a refresh, instead of AJAX. In which case...
I will assume (as per Django standards) that you've made all these checkboxes a part of a Django form. In that case, you can pass the forms a series of arguments (I would suggest a dictionary) that contains the initial value for all of your checkboxes.
class SearchQuery(forms.form)
#Adding an init will allow us to pass arguments to this form In
# This case, a single dictionary argument named 'context'
def __init__(self, *args, **kwargs)
checkbox_context = kwargs.pop('context')
super(SearchQuery,self).__init__(*args, **kwargs)
#Now, instead of doing a bunch of if statements, we can say that
# our dictionary passed a series of True and False keys that will
# tell us how our checkboxes should be, in their initial state
self.fields['checkbox_one'].initial = context['box1']
checkbox_one = forms.BooleanField()
So, let's say we passed context = {'box1':True} , then our checkbox would be rendered with an initial value of 'True' or 'Checked'

Django and radio buttons

I am implementing a quiz app and I am displaying the multiple choice answers using radio buttons.
I need to group the answers per question, so I have it like this
{% for answer in quiz.quizanswer_set.all %}
<p><input type="radio" name="score[{{quiz.id}}]" value="{{answer.score}}"/>{{answer.answer}}</p>
{% endfor %}
When I hit submit, I have the POST object like this
<QueryDict: {u'score[1]': [u'10'], u'score[3]': [u'10'], u'score[2]': [u'10'], u'Get Result': [u'Submit']}>
How do I loop through the scores in a canonical way?
I have tried request.POST.getlist('score') and it returns empty list
PS. the quiz.id may not in sequence, it's from the database row id.
My current work around is:
for quiz in Quiz.objects.all():
total_score += int(request.POST.get('score[{0}]'.format(quiz.id)))
Just filter the POST keys:
for score_key in filter(lambda key:key.startswith('score'), request.POST.keys()):
total_score += int(request.POST[score_key])
Update
Thinking about it, a list comprehension would be better than filter:
for score_key in [key for key in request.POST.keys() if key.startswith('score[')]:
total_score += int(request.POST[score_key])
Update 2
Another way that I have been looking into, is keeping the name for each radio button the same (e.g. score) and then merging the quiz id with the value:
<input type="radio" name="score" value="{{quiz.id}}-{{answer.score}} />
You could then easily get a list of all scores and split the values:
for value in request.POST['score']:
quiz_id, score = value.split('-')
You are using a PHP-ism by naming the inputs score[{{quiz.id}}]. Don't do that. Just call them all score, and your browser will do the right thing by putting them all in the same POST value which you can then get via request.POST.getlist('score').