Develop Reference

Using Jquery select radio otpions from dictionary

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 ?

jQuery's fadeToggle() selects more elements than desired

$(document).ready(function(event) {
$(".reply-btn").click(function() {
$(".section-row-reply").closest(".section-row-reply").fadeToggle();
});
});
I have a for-loop that generates the following:
comments
replies
reply form.
I want the jquery function,fadeToggle() to reveal the reply form for each comment when the reply button is clicked
<!-- jquery 2.2.4 -->
<script src="{% static 'js/jquery.min.js' %}"></script>
<!-- bootstrap 3.3.7 -->
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/jquery.stellar.min.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
<!-- post comments -->
<div class="section-row">
<div class="section-title">
<h3 class="title">{{ comments.count }} Comment{{ comments|pluralize }}</h3>
</div>
<div class="post-comments">
{% for comment in comments %}
{% if comment %}
<!-- comment -->
<div class="media">
<div class="media-left">
<img class="media-object" src="{{ comment.profile_picture.url }}" alt="">
</div>
<div class="media-body">
<div class="media-heading">
<h4>{{ comment.user }}</h4>
<span class="time">{{ comment.timestamp }}</span>
</div>
<p>{{ comment.content }}</p>
<div class="rely-button">
<button type="button" name="button" class="reply-btn btn btn-outline-dark btn-sm" id="reply-button">Reply</button>
</div>
<br>
<!-- display replies to the comment -->
{# reply per comment #}
{# all replies to comments will be shown below the comment #}
{% if comment.replies %}
{% for reply in comment.replies.all %}
<div class="media-replies pull-right">
<div class="media-left">
<img class="media-object" src="{{ reply.profile_picture.url }}" alt="">
</div>
<div class="media-body">
<div class="media-heading">
<h4>{{ reply.user }}</h4>
<span class="time">{{ reply.timestamp }}</span>
</div>
<p>{{ reply.content }}</p>
</div>
</div>
{% endfor %} {# endfor comment.replies #}
{% endif %} {# endif comment.replies #}
<!-- /display replies to parent comment -->
{# after replies have been shown, we can have the reply-comment-form #}
{% if user.is_authenticated %}
<!-- post reply -->
<div class="section-row-reply pull-right" style="display:none" id="show-reply-form">
<form class="post-reply" method="post">
{% csrf_token %}
<input type="hidden" name="comment_id" value="{{ comment.id }}">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea class="input" name="content" placeholder="Reply here..."></textarea>
</div>
</div>
<div class="col-md-12">
<button class="primary-button" value="submit" type="submit">Reply</button>
</div>
<!-- form_errors -->
{{ comment_form.errors }}
</div>
</form>
</div>
<!-- /post reply -->
{% endif %} {# endif user.is_authenticated #}
{# comments are display in the manner above in the div section #}
</div>
</div>
{% endif %} {# endif comment #}
{% endfor %} {# endfor comment in comments #}
</div>
</div>
<!-- /post comments -->
This is a django powered site hence the {% %}, {# #} and {{ }} at the html layer. The function works but not exactly. When any reply button is clicked (to display the reply form), other reply forms for other comments are displayed.
**The idea is to make the reply button for each comment display only the reply form for that comment. Any help will be greatly appreciated. I suspect my selection of elements at the jquery layer. **
all css are that of bootstrap 3.3.7

What code can I add to make this sentence appear on my French site?

I have a snippet of code that I need help with. I am looking to make sure that this Join the Movement line shows up in French on my French website. Right now everything else is being translated but I wanted to know what code can I add to make sure this shows up in the other language?
<div class="hero-unit">
<div class="container">
<div class="row">
<div class="col-sm-12">
{% if hero_graphic or hero_text %}
<div class="hero-text">
{% if options.pledge_now_url %}
<div class="hero-pledge-button">
Join the Movement
</div>
{% endif %}
{% if constant('ICL_LANGUAGE_CODE') == 'fr' %}
<style type='text/css'>#media (min-width: 769px) { .hero-unit .hero-text-plain { font-size: 60px; } .hero-unit .hero-text-formatted .line { font-size: 30px; }}</style>
{% endif %}
{% if hero_text and post.get_field('hero_text_smart_formatting') %}
<div class="hero-text-formatted">
{{ hero_text|smart_hero_formatting }}
</div>
{% elseif hero_graphic and hero_text %}
<img src="{{hero_graphic['url']}}" alt="{{hero_text}}" />
{% elseif hero_graphic %}
<img src="{{hero_graphic['url']}}" alt="{{hero_graphic["alt"]}}" />
{% elseif hero_text %}
<span class="hero-text-plain">{{hero_text}}</span>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
</div>

I'm not sure if the translation is correct, but as far as I understood your problem, the following modification should solve it.
<div class="hero-unit">
<div class="container">
<div class="row">
<div class="col-sm-12">
{% if hero_graphic or hero_text %}
<div class="hero-text">
{% if options.pledge_now_url %}
<div class="hero-pledge-button">
{% if constant('ICL_LANGUAGE_CODE') == 'fr' %}
Joignez-vous au mouvement
{% else %}
Join the Movement
{% endif %}
</div>
{% endif %}
{% if constant('ICL_LANGUAGE_CODE') == 'fr' %}
<style type='text/css'>#media (min-width: 769px) { .hero-unit .hero-text-plain { font-size: 60px; } .hero-unit .hero-text-formatted .line { font-size: 30px; }}</style>
{% endif %}
{% if hero_text and post.get_field('hero_text_smart_formatting') %}
<div class="hero-text-formatted">
{{ hero_text|smart_hero_formatting }}
</div>
{% elseif hero_graphic and hero_text %}
<img src="{{hero_graphic['url']}}" alt="{{hero_text}}" />
{% elseif hero_graphic %}
<img src="{{hero_graphic['url']}}" alt="{{hero_graphic["alt"]}}" />
{% elseif hero_text %}
<span class="hero-text-plain">{{hero_text}}</span>
{% endif %}
</div>
{% endif %}
</div>
</div>

Jquery Countdown Plugin Not Working

I am using JQuery's countdown plugin in my Django application. I set up the countdown init script in a JQuery document.ready callback function, and I can see the javascript load when I check the network tab in Chrome's web inspector, but the plugin doesn't show up. I logged the element to the web console to make sure that it existed when I tried to call JQuery.countdown's .countDown method that kickstarts the plugin. It does in fact exist, but there is just empty space in between the tags. There are also no errors in the console.
Scripts "both JQuery and JQuery countdown being loaded"
<!-- SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type='text/javascript' src="/static/js/menu.js"></script>
<script type='text/javascript' src="/static/js/user_actions.js"></script>
<script type="text/javascript" src="/static/js/jquery.countdown/jquery.countdown.js"></script>
<!-- JQUERY Countdown -->
<script type="text/javascript">
$(document).ready(function () {
var clock = $("#countdown");
console.log(clock);
$("#countdown").countDown("2017/12/01", function (event) {
console.log("CLOCK WORKS");
$(this).text(
event.strftime('%D days %H:%M:%S')
);
});
});
</script>
HTML
{% block content %}
<div id='billboard' class='flexslider billboards'>
<ul class='slides'>
{% for billboard in billboards %}
<li class='slide' style="background-image: url('{{ billboard.image }}');">
<div class='transparent-overlay'></div>
<div class='container'>
<div class='slide-content'>
<h1>{% inplace_edit "billboard.header" %}</h1>
</div>
</div>
</li>
{% endfor %}
</ul>
</div>
<div class="home-sub-container">
<div class="col-xs-8" style="border: 1px solid lime;">
<div id="daily-sales-tracker" style="height: 500px; background-color: lightgray; margin-bottom: 30px;"></div>
<div id="additional-plugins" style="height: 500px; background-color: lightgray;"></div>
</div>
<div class="col-xs-4 red-alerts">
<p>RED ALERTS</p>
<div class="styled-divider">
<div class="color"></div>
<div class="no-color"></div>
</div>
{% for alert in red_alerts %}
<div class="red-alert">
<div class="fa-container">
{% if alert.font_awesome_one %}
<i class="fa {{ alert.font_awesome_one }}"></i>
{% endif %}
{% if alert.font_awesome_two %}
<i class="fa {{ alert.font_awesome_two }}"></i>
{% endif %}
{% if alert.font_awesome_three %}
<i class="fa {{ alert.font_awesome_three }}"></i>
{% endif %}
</div>
<p class="alert-title">
{{ alert.title }}
</p>
<a href="{{ alert.link }}" class="alert-links">
DOWNLOAD
</a>
</div>
{% endfor %}
<div id="countdown">
</div>
</div>
</div>
<div id='sections' class='home-sections'>
{% for section in sections %}
<div class='section-wrapper {% cycle "white" "dark" %}'>
<div class='container'>
<div class='row'>
{% inplace_edit 'section.content|safe' adaptor='tiny' %}
<div class='clear-both'></div>
</div>
</div>
</div>
{% endfor %}
<div class='clear-both'></div>
</div>
{% endblock %}

Foundation 6 Orbit not Working in Django Template

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?