实施 Bootstrap 进度条以通知用户课程进度

Question

我一直在网上寻找如何创建一个进度条来通知用户他们已经完成了多少工作。我理解 Bootstrap's website. 中显示的 HTML 部分，但是，我不明白我应该如何使用从 [=13= 中检索到的 用户数据 ]（表示取得和剩余类）和JavaScript以显示用户进度的进度条。

任何help/explanation（你的思考过程是什么？有什么好的教程吗？）非常感谢这个菜鸟！我想保持在最佳实践和表现之内，因为我还在学习。谢谢！

我正在查看 Stacks 问题，其中 to change the progress bar (not quite right), time incrementation, another using checkboxes 可以更改进度条（重点是此处的 JS 代码）。

当前使用：Python 2.7，Pyramid（Web 框架），Boostrap/Jinja2 模板

查看代码：

@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 用于显示整个课程目录的主页 模板：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代码： 不确定如何让它与来自视图代码的数据进行交互

Answer 1

您不需要任何 JavaScript 来显示进度条。您可能需要一些 JavaScript 来 在用户更改页面上的某些内容时 更新进度条 而无需重新加载页面 - 据我了解，不是你的情况。

一个进度条，基本上就是两个嵌套的div；内部 div 用 CSS 着色，其宽度设置为其父级宽度的给定百分比。您只需在模板中生成正确的标记即可。

<div class="progress">
  <div class="progress-bar" ... style="width: {{course_completion_percent}}%;">
    {{course_completion_percent}}%
  </div>
</div>

（当然，在您的视图函数中，您需要计算 course_completion_percent 变量并将其传递给模板）。这样的事情会做：

course_completion_percent = 100.0 * len(completed_assessments) / len(all_assessments)

return {
    ...
    'course_completion_percent': course_completion_percent,
}

实施 Bootstrap 进度条以通知用户课程进度

Implementing a Bootstrap progress bar to inform User of course progress

javascript

python-2.7

pyramid

twitter-bootstrap

progress-bar