I have a HTML template which has Multichoice Question with options and Essay type questions.
The user's answers are saved in model called Sitting in user_answers field as
sitting.user_answers =
{"424": "1527", "319": "adadadf", "203": "786", "437": "1572", "383": "1429"}
The first number is the question_id and and second is the answer_id(selected option) or answer itself (incase essay type question).
I am able to display the questions in one template using the following code:
views.py
if self.sitting.get_first_question() is False:
questions= MCQuestion.objects.filter(question_ptr_id__in=self.sitting._question_ids()).prefetch_related('answer_set__question')
essayquestions= Essay_Question.objects.filter(question_ptr_id__in=self.sitting._question_ids())
answerdetails = Sitting.objects.filter(id=self.sitting.id)
print(answerdetails)
return render(self.request, 'dashboard/exam-review.html', {'questions': questions,'essayquestions': essayquestions,'form': True})
Template
{% for question in questions %}
<div class="row mt-2 mb-4 shadow-1" style="background: #ececec">
<div class="col-md-10">
<input type=hidden name="question_id" value="{{ question.id }}" class="question_id">
<div class="panel-heading">
<p class="panel-title mb-2 mt-2" >
<li style="list-style-type: none;" class="mb-1 mt-1"><strong> {% autoescape off %}{{ question.content }}{% endautoescape %} </strong></li>
{% if question.figure %}
<div class="row mb-1">
<img src="{{ question.figure.url }}" alt="{{ question.content }}" />
</div>
{% endif %}
{% if question.questionmarks %}
<div class="row ml-1" >
<p style="font-size:0.8rem"><b>Marks :</b> {{ question.questionmarks }}</p>
</div>
{% endif %}
</div>
<div class="panel-body ">
<ul class="mb-2" style="list-style-type: none;">
{% regroup question.answer_set.all by get_content_display as answer_list %}
{% for answers in answer_list %}
<span>{{ section.grouper }}</span>
{% for answer in answers.list %}
//What to write here ???
<li class="list-group-item quiz-answers" >
<span><label for="id_answers_0"><input type="radio" name="answers_{{question.id}}" value="{{answer.id}}" style="margin-right:10px;" id="{{answer.id}}" required>
{{answer.content}} </label> </span></li>
{% endfor %}
{% endfor %}
</ul>
</div>
</div>
</div>
{% endfor %}
{% if essayquestions %}
{% for question in essayquestions %}
<div class="row mt-2 mb-4 shadow-1" style="background: #ececec">
<div class="col-md-10">
<input type=hidden name="question_id" value="{{ question.id }}" class="question_id">
<div class="panel-heading">
<p class="panel-title mb-1" >
<li style="list-style-type: none;"><strong> {% autoescape off %}{{ question.content }}{% endautoescape %} </strong></li>
<div class="row mb-1">
{% if question.figure %}
<img src="{{ question.figure.url }}" alt="{{ question.content }}" />
{% endif %}
</div>
{% if question.questionmarks %}
<div class="row mb-1" >
<p style="font-size:0.8rem"><b>Marks :</b> {{ question.questionmarks }}</p>
</div>
{% endif %}
</p>
<div class="panel-body mb-2">
<ul class="list-group mb-2" style="list-style-type: none;">
<li class="list-group-item quiz-answers mb-1">
<span><textarea name="answers" cols="40" rows="5" style="width:100%" id="answer_{{question.id}}" required>
</textarea> </span>
</li>
</ul>
</div>
</div>
</div>
</div>
{% endfor %}
{% endif %}
Could I use Jquery to fill the radio option using dictionary object ?
Related
I have API that generates table that uses Flask-Moment. API returns HTML code and then it's displayed on the page, but column that uses Flask-Moment is empty. I think it's somehow connected with the fact that Flask-Moment can't (probably) work with dynamically generated HTML.
So, how to use Flask-Moment with dynamically generated HTML?
Table screenshot
responses/submissions.html:
<div class="submissions_table">
<div class="table_header__wrapper">
<div class="table_header">
{# Result #}
<div class="table_header_column result">
<p>RESULT</p>
</div>
{# Language #}
<div class="table_header_column language">
<p>LANGUAGE</p>
</div>
{# Time #}
<div class="table_header_column time">
<p>TIME</p>
</div>
{# View result #}
<div class="table_header_column view_result"></div>
</div>
</div>
<div class="table_body">
{% for submission in submissions %}
<div class="table_row__wrapper">
<div class="table_row">
{# Result #}
{% set submission_result = submission.get_result() %}
{% if submission_result['success'] %}
{% set result_status = 'success' %}
{% else %}
{% set result_status = 'fail' %}
{% endif %}
<div class="table_row_column result {{ result_status }}">
{# Status icon #}
{% if submission_result['success'] %}
<i class="result__icon far fa-check-circle"></i>
{% else %}
<i class="result__icon far fa-times-circle"></i>
{% endif %}
<p>{{ submission_result['message'] }}</p>
</div>
{# Language #}
<div class="table_row_column language">
{% set language_info = languages.get_info(submission.language) %}
<img src="{{ language_info['icon'] }}" alt="" class="language__icon">
<p class="language__name">{{ language_info['fullname'] }}</p>
</div>
{# Time #}
<div class="table_row_column time">{{ moment(submission.submission_date).fromNow() }}</div>
{# View result #}
<div class="table_row_column view_result">View Result</div>
</div>
</div>
{% endfor %}
</div>
</div>
my problem is on page pagination on Django quiz App when I click on the next question, its will unselect the previous selected input and only one answer will be recorded.
Form Codes:
<form action="/calculate_marks" onsubmit="return saveAns()" enctype="multipart/form-data" id ='quiz' method="POST">
{% csrf_token %}
<input type="hidden" name="csrfmiddlewaretoken" value="C24rUotmdHawVQJL3KrqiWxvti8UffOFYUc8TRbZtLt36AVLdP3jbkzUVe3beRAa">
<h1>{{course}} Quiz</h1><br>
<h4>Number of Questions in the Quiz: {{q_count}}</h4>
<hr>
<p>pages {{page_obj}}</p>
<hr>
{% for q in page_obj %}
<!-- <h6 style="text-align: right;">[marks {{q.marks}}]</h6> -->
{% if q.img_quiz.url %}
<div class="text-center" ><img src="{{q.img_quiz.url}}" width="100%" height="300px" alt=""> </div><br>
{% endif %}
<div style="border: 2px dotted green;" class="container shadow-lg mb-1 bg-white rounded">
<p class="d-flex" style="overflow-x: auto; white-space: pre-wrap; font-size: 20px;font-family: sans-serif;" >
{{ q.question }}</p>
{% if q.marks %}
<h6 style="text-align: right;">[marks {{q.marks}}]</h6>
{% endif %}
</div>
{% if q.option1 %}
<div class="card-header shadow-lg mb-1 bg-white rounded">
<input type="radio" name="{{forloop.counter}}" id="{{q.option1}}" value="Option1">
<label for="option1"> {{q.option1}}</label><br>
</div>
{% endif %}
{% if q.option2 %}
<div class="card-header shadow-lg mb-1 bg-white rounded">
<input type="radio" name="{{forloop.counter}}" id="{{q.option2}}" value="Option2">
<label for="option2">{{q.option2}}</label><br>
</div>
{% endif %}
{% if q.option3 %}
<div class="card-header shadow-lg mb-1 bg-white rounded">
<input type="radio" name="{{forloop.counter}}" id="{{q.option3}}" value="Option3">
<label for="option3">{{q.option3}}</label><br>
</div>
{% endif %}
{% if q.option4 %}
<div class="card-header shadow-lg mb-1 bg-white rounded">
<input type="radio" name="{{forloop.counter}}" id="{{q.option4}}" value="Option4">
<label for="option4">{{q.option4}}</label><br>
</div>
{% endif %}
<br><br>
{% empty %}
<h1 class="card text-center text-danger">No Exam Available Yet. CHECK LATER</h1>
{% endfor %}
<input class="btn btn-primary" type="submit" value="Next Subject">
</form>
calculate mark view codes. This is where am receiving the input from the template and pass it on to the view:
def calculate_marks_view(request):
if request.COOKIES.get('course_id') is not None:
course_id = request.COOKIES.get('course_id')
course=QMODEL.Course.objects.get(id=course_id)
total_marks=0
questions=QMODEL.Question.objects.all().filter(course=course)
for i in range(len(questions)):
selected_ans = request.COOKIES.get(str(i+1))
actual_answer = questions[i].answer
if selected_ans == actual_answer:
total_marks = total_marks + questions[i].marks
student = Student.objects.get(user_id=request.user.id)
result = QMODEL.Result()
result.marks=total_marks
result.exam=course
result.student=student
result.save()
return HttpResponseRedirect('take-exam')
else:
return HttpResponseRedirect('take-exam')
Javascripts that collect input answers:
<script>
function saveAns(){
var ele = document.getElementsByTagName('input');
for(i = 0; i < ele.length; i++) {
if(ele[i].type="radio") {
if(ele[i].checked){
setCookie(ele[i].name,ele[i].value,3)
}
}
}
}
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
</script>
Pagination codes:
<!-- pagination codes star -->
{% if page_obj.has_other_pages %}
<div class="container" id = ''>
<nav class="d-flex" aria-label="Page navigation example">
<ul class="pagination pagination-sm flex-wrap justify-content-center">
{% if page_obj.has_previous %}
<li class=" page-item"><a class="continue page-link badge bg-primary rounded-pill" href="?page={{ page_obj.previous_page_number }}">previous «</a></li>
{% else %}
<li class="page-item disabled"><span>«</span></li>
{% endif %}
{% for i in page_obj.paginator.page_range %}
{% if page_obj.number == i %}
<li class="page-item active" aria-current="page"><span><a class="page-link" href="">{{ i }}</a></span></li>
{% else %}
<li class="page-item"><a class="continue page-link" href="?page={{ i }}">{{ i }}</a></li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li class="page-item"><a class="page-link badge bg-primary rounded-pill" href="?page={{ page_obj.next_page_number }}"> next »</a></li>
{% else %}
<li class="page-item disabled"><span>last » </span></li>
{% endif %}
</ul>
</nav>
</div>
I'm trying to hide the remove button from a product with certain id but kinda confuse, I have tried using {% if %} until it hits {% endif %} but still it doesn't want to hide it. For example I have tried to hide a button with class= "ajaxcart__qty-adjust ajaxcart__qty--delete icon-fallback-text" in product id 2423924.
{{#items}}
<div class="ajaxcart__product">
<div class="ajaxcart__row" data-line="{{line}}">
<div class="row">
<div class="col-xs-4 col-md-3 col-img-left">
<img src="{{img}}" alt="">
</div>
<div class="col-xs-8 col-md-9">
<p>
{{name}}
{{#if variation}}
<span class="ajaxcart__product-meta">{{variation}}</span>
{{/if}}
{{#properties}}
{{#each this}}
{{#if this}}
<span class="ajaxcart__product-meta">{{#key}}: {{this}}</span>
{{/if}}
{{/each}}
{{/properties}}
{% endraw %}{% if settings.cart_vendor_enable %}{% raw %}
<span class="ajaxcart__product-meta">{{ vendor }}</span>
{% endraw %}{% endif %}{% raw %}
<button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--detete icon-fallback-text" data-id="{{key}}" data-line="{{line}}" data-qty="0">
<span class="fallback-text" aria-hidden="true">x</span>
<span class="visually-hidden">{% endraw %}{{ 'cart.general.remove' | t }}{% raw %}</span>
</button>
</p>
<div class="row display-table">
<div class="col-xs-5 display-table-cell ">
<div class="ajaxcart__qty">
<button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--minus icon-fallback-text" data-id="{{key}}" data-qty="{{itemMinus}}" data-line="{{line}}">
<span class="fallback-text" aria-hidden="true">−</span>
<span class="visually-hidden">{% endraw %}{{ 'cart.general.reduce_quantity' | t }}{% raw %}</span>
</button>
<input type="text" name="updates[]" class="ajaxcart__qty-num" value="{{itemQty}}" min="0" data-id="{{key}}" data-line="{{line}}" aria-label="quantity" pattern="[0-9]*">
<button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--plus icon-fallback-text" data-id="{{key}}" data-line="{{line}}" data-qty="{{itemAdd}}">
<span class="fallback-text" aria-hidden="true">+</span>
<span class="visually-hidden">{% endraw %}{{ 'cart.general.increase_quantity' | t }}{% raw %}</span>
</button>
</div>
</div>
<div class="ajax_cart_money col-xs-7 display-table-cell text-left">
{{#if discountsApplied}}
<small class="ajaxcart-item__price-strikethrough"><s>{{{originalLinePrice}}}</s></small>
<br><span>{{{linePrice}}}</span>
{{else}}
<div>x <span class="money">{{{price}}}</span> = <span class="money money-total">{{{linePrice}}}</span></div>
{{/if}}
</div>
</div>
{{#if discountsApplied}}
<div class="row display-table">
<div class="col-xs-12 text-right">
{{#each discounts}}
<small class="ajaxcart-item__discount">{{ this.title }}</small><br>
{{/each}}
</div>
</div>
{{/if}}
</div>
</div>
</div>
</div>
{{/items}}
I am trying to make a Foundation 6 Orbit with the slides comprising of a separate/ dynamic Django template inclusion as such:
<div class="row">
<div class="small-12 columns">
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
<ul class="orbit-container">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span> ◀︎</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span> ▶︎</button>
{% for p in projects %}
<li class="orbit-slide">
{% include "project/project_landing_stub.html" %}
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
project_landing_stub.html:
<div class="callout small-12 columns" style="margin-top:30px;">
<a href="{{ p.get_absolute_url }}" style="color:black;">
<div class="row" style="margin-bottom: 20px;">
<div class="small-12 columns" style="border-bottom:1px solid lightgrey;">
<p>{{ p.offer_title|truncatechars:100 }}</p>
</div>
</div>
<div class="row">
<div class="small-6 columns">
<img class="thumbnail" src="{% if p.project.photo %}{{ p.project.photo.url }}{% endif %}"/>
</div>
<div class="small-6 columns">
<i class="fa fa-map-marker"></i> {{ p.project.city }}, {{ p.project.country }}
</div>
</div>
<div class="row" style="text-align: center;font-size: 12px;">
{% if p.offer_type == 'CO' %}
<div class="small-4 columns padding-10">
{% if p.annual_return %}
<b>{{ p.annual_return }}%</b><br/>
{% else %}
<b>-</b><br/>
{% endif %}
<span class="small-gray">total yield</span>
</div>
<div class="small-4 columns padding-10">
<b>{{ p.time_horizon }} </b><br/>
<span class="small-gray">tenure (mth)</span>
</div>
<div class="small-4 columns padding-10">
<p style="font-size: 12px;">
{% if p.loan %}
<b>{{ p.loan.get_payment_freq_display }}</b>
{% else %}
<b>End of Tenure</b>
{% endif %}
<br/>
<span class="small-gray">payout freq</span>
</p>
</div>
{% else %}
<div class="small-6 columns padding-10">
<b>{{ p.currency }} {{ p.min_investment }} </b><br/>
<span class="small-gray">min. investment</span>
</div>
<div class="small-6 columns padding-10">
{% if p.annual_return %}
<b>{{ p.annual_return }}%</b><br/>
{% else %}
<b>-</b><br/>
{% endif %}
<span class="small-gray">projected return</span>
</div>
{% endif %}
</div>
</a>
</div>
But it does not show, due to the orbit-container being rendered with 0px height property. Downloaded the Complete Foundation on 18th of July 2016, and using it here. The Orbit sample works fine if pasted in the same page, so I figured this has something to do with the dynamic generation of the orbit-slides using Django loop. Any idea?
I am having difficulty getting my variants to carry over to my shopping cart on my product page for my custom storenvy store.
Any help would be much appreciated! I am not much a of a coder. I think I am close, but I could be wrong.
Here is the code I am using and the link to the live page is: http://apricotmantle.storenvy.com/collections/259687-merch/products/17058861-bloody-beach-zombie-limited-edition-pinup-print
CODE:
<div class="slide products_{{product.id}} active">
<div class="home-content">
<img class="artwork" src {{product.photo.url}}" alt="{{product.name | escape }}" />
<div class="artworkContent">
<h1>{{ product.name }}</h1>
<div id="add_notice" style="display:none;"></div>
{% if product.description != blank %}
{{ product.description | auto_link | paragraphs }}
{% endif %}
{% if product.image_count > 1 %}
<div id="slider-code">
<div class="viewport">
<ul class="overview" id="thumbs">
{% for photo in product.photos offset:1 limit:3 %}
<li>
<a href="{{photo.url}}" class="product_thumb" {%if forloop.first %}id="first_thumb" {%endif%} rel="product_photos">
<img src="{{photo.medium_url}}" height="100" width="145" alt="{{product.name | h}} - Thumbnail {{forloop.index}}"/>
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% if product.coming_soon %}
<h3>Coming soon!</h3>
{% else %}
{% for variant in product.variants limit:1 %}
<div class="add {{ variant.status }}">
{% if variant.quantity < 1 %}
<img src="/themes/default/images/btn_sold_out-v2.png" />
{% else %}
<p id="price">{{ product.price | money_with_sign }}</p>
<form id="add-to-cart" action="/cart/add" method="post" >
<select id="variant-select">
<option>Product Options</option>
{% for variant in product.variants %}
<option value="{{ variant.id }}">{{variant.title }} for {{ variant.price | money}}</option>
{% endfor %}
</select>
<input type="image" name="add" value="Purchase" id="purchase" src="{{ 'purchase.png' | asset_url}}" />
<span id="product-price">{{ product.price | money }}</span>
</form>
{% endif %}
</div><!-- end .add -->
<div class="{{ product.css_class }}">
{% if product.on_sale %}<div class="sale">On Sale</div>{% endif %}
{% if product.preorder %}<div class="preorder">Pre-Order</div>{% endif %}
{% if product.coming_soon %}<div class="soon">Coming Soon</div>{% endif %}
{% if product.sold_out %}<div class="soldout">Sold Out</div>{% endif %}
</div>
{% endfor %}
{% endif %}
Storenvy Marketplace Page
<!--<h6>Share This</h6>
<div id="share_product">
{{ product | facebook_like_button }}
{{ product | tweet_button }}
{{ product | wanelo_button }}
{{ product | pinterest_button }}
<hr/>
</div>-->
</div><!-- end .product_info --></div>
</div>