{{ block content }}



<font size="3">  
       
      <p>
      <b>Directions: </b> The next set of questions will ask about your feelings toward 
                           various groups using something we call the feeling thermometer. You will be asked to rate each group using 
                           a number between 0 and 100:   
                             </p>
                            <p>
                            <ul>
                              <li> Ratings between  <b> 0 degree and 50 degrees  </b>  mean that you don’t feel favorable toward the
                             group and that you don’t care too much for that group. </li>
                             </ul>
                             </p>
                            <p>  
                          <ul>
                            <li>  Ratings between  <b> 50 degrees and 100 degrees  </b> mean that you feel 
                           favorable and warm toward that group. </li>
                            </ul>
                         </p>
                        <p>
                          <ul>
                            <li>  You would rate the group at the  <b> 50 degree  </b>  mark if you don’t feel
                           particularly warm or cold toward the group. </li>
                           </ul>
                           </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 'whiterating' }}
    {{ formfield_errors 'demorating' }}
    {{ formfield_errors 'blackrating' }}
    {{ formfield_errors 'asianrating' }}
    {{ formfield_errors 'immigrantrating' }}
    {{ formfield_errors 'latinorating' }}
    {{ formfield_errors 'repubrating' }}
    
    
    <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) {
    
            slider1 = new mgslider("whiterating", 0, 100, 10);
            slider1.yourvalue = "Your rating of White Americans";
            slider1.print(document.getElementById("sliders_here"));
            
            slider2 = new mgslider("demorating", 0, 100, 10);
            slider2.yourvalue = "Your rating of Democrats";
            slider2.print(document.getElementById("sliders_here"));
            
            slider3 = new mgslider("blackrating", 0, 100, 10);
            slider3.yourvalue = " Your rating of Blacks/African Americans";
            slider3.print(document.getElementById("sliders_here"));
            
            slider4 = new mgslider("asianrating", 0, 100, 10);
            slider4.yourvalue = "Your rating of Asian Americans";
            slider4.print(document.getElementById("sliders_here"));
               
            slider5 = new mgslider("immigrantrating", 0, 100, 10);
            slider5.yourvalue = "Your rating of Immigrants";
            slider5.print(document.getElementById("sliders_here"));
               
            slider6 = new mgslider("latinorating", 0, 100, 10);
            slider6.yourvalue = "Your rating of Hispanic/Latinos";
            slider6.print(document.getElementById("sliders_here"));
               
            slider7 = new mgslider("repubrating", 0, 100, 10);
            slider7.yourvalue = "Your rating of Republicans";
            slider7.print(document.getElementById("sliders_here"));

        });
        
    </script>
    
                </p>
            </div>
        </div>
        <br>

    {{ next_button }}

{{ endblock }}