I've been looking all over the internets on how to create a progress bar that informs the User on how much work they have completed. I understand the HTML portion as shown on Bootstrap's website. However, I don't understand how I should go about using the retrieved User data from the view code api (indicating the taken and remaining classes) with JavaScript to show the progress bar of a User's progress.
Any help/explanation (What would be your thought process? Are there any good tutorials on this? ) is greatly appreciated by this noob! I want to stay within best practice and performance as I am still learning. Thanks!
I was looking at Stacks questions that have user input to change the progress bar (not quite right), time incrementation, another using checkboxes to change progress bar (focus is the JS code here).
Currently using: Python 2.7, Pyramid (Web Framework), Boostrap/Jinja2 Templates
View Code:
@view_config(route_name='assessments', request_method='GET', renderer='templates/unique_assessments.jinja2', permission='create')
def view_unique_microseries_group(request):
logged_in_userid = authenticated_userid(request)
if logged_in_userid is None:
raise HTTPForbidden()
all_assessments = api.retrieve_assessments() #all assessments in a list
#url = HTTPSeeOther(location=request.route_url('microseries'))
return {'logged_in': logged_in_userid, 'all_assessments': all_assessments}
@view_config(route_name='microseries', request_method='GET', renderer='templates/assessments.jinja2', permission='create')
def view_microseries_subseries(request):
logged_in_userid = authenticated_userid(request) #Authenticated User
if logged_in_userid is None:
raise HTTPForbidden()
microseries = int(request.matchdict['id']) #grabs class no. from link in assessments
microseries_list = api.retrieve_assessment(microseries=microseries)
#print 'microseries_list', microseries_list #prints all the matching number of microseries
all_assessments = api.retrieve_assessments() #all assessments in a list
user_results = api.retrieve_assessment_results() #all user results in a list
completed_assessments = []
pending_assessments = []
for assessment in all_assessments:
if assessment is None: # assumes None
continue
found_assessment_result = False
for result in user_results:
if result.owner.username == logged_in_userid and result.assessment == assessment:
found_assessment_result = True # assign Boolean statement
break # no need to check further
if found_assessment_result:
completed_assessments.append(assessment)
else:
pending_assessments.append(assessment)
message = 'Completed'
return {'completed_assessments': completed_assessments, 'pending_assessments': pending_assessments, 'logged_in': logged_in_userid, 'message': message, 'all_assessments':all_assessments, 'microseries_list': microseries_list}
HTML for main page showing the entire catalogue of courses template: unique_assessments.jinja2
<!-- Stats Gallery Section with Progress bar in each thumbnail-->
<div class="container">
<div class= 'gallery'>
<div class="row">
<div class="col-sm-8 col-md-3 ">
<div class="thumbnail">
<a href="{{request.application_url}}/microseries/1">
<img src="{{request.static_url('img.png')}}" alt="Training" class="img-responsive" style="width: 200px; height: 100px;"/>
</a>
<h4>Video Series 1</h4>
<p class="tag">Contains Episodes 1A-1F </p>
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> 100%
</div>
</div>
<p class="text_column"></p>
</div>
</div><!-- /.col-->
<div class="col-sm-8 col-md-3 ">
<div class="thumbnail">
<a href="{{request.application_url}}/microseries/2">
<img src="{{request.static_url('img.png')}}" alt="Training" class="img-responsive" style="width: 200px; height: 100px;"/>
</a>
<h4>Video Series 2</h4>
<p class="tag">Contains Episodes 2A-2E </p>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> 20%
</div>
</div>
<p class="text_column"></p>
</div>
</div><!-- /.col-->
<div class="col-sm-8 col-md-3 ">
<div class="thumbnail">
<a href="{{request.application_url}}/microseries/3">
<img src="{{request.static_url('img.png')}}" alt="Training" class="img-responsive" style="width: 200px; height: 100px;"/>
</a>
<h4>Video Series 3</h4>
<p class="tag">Contains Episodes 3A-3G </p>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> 60%
</div>
</div>
<p class="text_column"></p>
</div>
</div><!-- /.col-->
<div class="col-sm-8 col-md-3 ">
<div class="thumbnail">
<a href="{{request.application_url}}/microseries/4">
<img src="{{request.static_url('img.png')}}" alt="Training" class="img-responsive" style="width: 200px; height: 100px;"/>
</a>
<h4>Video Series 4</h4>
<p class="tag">Contains Episodes 4A-4E </p>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> 80%
</div>
</div>
<p class="text_column"></p>
</div>
</div><!-- /.col-->
<div class="col-sm-8 col-md-3 ">
<div class="thumbnail">
<a href="{{request.application_url}}/microseries/5">
<img src="{{request.static_url('img.png')}}" alt="Training" class="img-responsive" style="width: 200px; height: 100px;"/>
</a>
<h4>Video Series 5</h4>
<p class="tag">Contains Episodes 5A-5G </p>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> 80%
</div>
</div>
<p class="text_column"></p>
</div>
</div><!-- /.col-->
</div><!-- /.row-->
</div><!-- Gallery Container Ends -->
JS Code: uncertain how to get this to interact with the data that comes from the view code
You don't need any JavaScript to display a progress bar. You may want some JavaScript to update the progress bar when user changes something on the page without page reload - which, as I understand, is not your case.
A progress bar, basically, is two nested divs; the inner div is colored with CSS and its width set to the given percent of its parent's width. All you need is to generate the correct markup in your template.
<div class="progress">
<div class="progress-bar" ... style="width: {{course_completion_percent}}%;">
{{course_completion_percent}}%
</div>
</div>
(of course, in your view function you need to calculate the course_completion_percent variable and pass it to the template). Something like this would do:
course_completion_percent = 100.0 * len(completed_assessments) / len(all_assessments)
return {
...
'course_completion_percent': course_completion_percent,
}