{{ block content }}



<font size="3">  
       
      <p>
      <b>Directions: </b> Using the scale below, please indicate the number of close friends with different ethno-racial background.  
                          If you have <i> more </i> than 10, you can just put 10. 
        </p>
       <p>
<div class="card bg-light">
    <div class="card-body">
        <p align="justify">

    
    <style>
        .mgslider-wrapper {
            border-spacing: 10px;
        }
        .mgslider-limit {
            width: 10%;
            min-width: 75px;
            height: 40px;
            margin: 100px;
            text-align: center;
            background: #eee;
            border: 1px solid #888;
        }
        .mgslider-limit, .mgslider-value {
            font-variant-numeric: tabular-nums;
        }
        .mgslider-before {
            height: 16px;
            width: 100%;
            background: #1e5bff;
        }
        
    </style>

    {{ formfield_errors 'whitefri'}}
    {{ formfield_errors 'blackfri'}}
    {{ formfield_errors 'hispanicfri'}}
    {{ formfield_errors 'asianfri'}}



    <p>
    Click the blue bars to reveal the sliders for <b>each group. </b> 
    </p>

    <div id="sliders_here"></div>

    <script src="{{ static 'mgslider.js' }}"></script>

    <script>
        $(document).ready(function (event) {
    
            slider2 = new mgslider("whitefri", 0, 10, 1);
            slider2.yourvalue = "Close friends that are White";
            slider2.print(document.getElementById("sliders_here"));
            
            slider3 = new mgslider("blackfri", 0, 10, 1);
            slider3.yourvalue = " Close friends that are Black/African American";
            slider3.print(document.getElementById("sliders_here"));
            
            slider4 = new mgslider("hispanicfri", 0, 10, 1);
            slider4.yourvalue = "Close friends that are Hispanic/Latino";
            slider4.print(document.getElementById("sliders_here"));
               
            slider5 = new mgslider("asianfri", 0, 10, 1);
            slider5.yourvalue = "Close friends that are Asian American";
            slider5.print(document.getElementById("sliders_here"));
               
        });
        
        
    </script>
    
                </p>
            </div>
        </div>
        <br>

    {{ next_button }}

{{ endblock }}