index.html 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  6. <title>PolitiScales - Quiz</title>
  7. <meta name="description" content="Welcome to the PolitiScale, the online political test. You will be confronted to a series of affirmations and for each of them you will have to click on the button which corresponds the most to your opinion." />
  8. <link rel="stylesheet" href="/style.css" type="text/css" media="screen" />
  9. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
  10. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  11. <meta name="twitter:card" content="summary" />
  12. <meta name="twitter:site" content="@PolitiScales" />
  13. <meta name="twitter:creator" content="@PolitiScales" />
  14. <meta property="og:url" content="http://politiscales.net/en_US/" />
  15. <meta property="og:title" content="PolitiScales" />
  16. <meta property="og:locale" content="en_US" />
  17. <meta property="og:description" content="Welcome to the PolitiScale, the online political test. You will be confronted to a series of affirmations and for each of them you will have to click on the button which corresponds the most to your opinion." />
  18. <meta property="og:image" content="http://politiscales.net/images/facebook-preview.png" />
  19. </head>
  20. <body>
  21. <header>
  22. <div id="header">
  23. <h1><a href="/">PolitiScales</a></h1>
  24. </div>
  25. </header>
  26. <div id="content">
  27. <div id="mainFrame">
  28. <h2 id="question-number">Loading...</h2>
  29. <div class="questionBox">
  30. <p id="question-text"></p>
  31. </div>
  32. <div class="navButtons">
  33. <button class="buttonQuestion" onclick="next_question(1)" style="background-color: #1b5e20;">Absolutely agree</button>
  34. <button class="buttonQuestion" onclick="next_question(2/3)" style="background-color: #4caf50;">Somewhat agree</button>
  35. <button class="buttonQuestion" onclick="next_question(0)" style="background-color: #bbbbbb;">Neutral or hesitant</button>
  36. <button class="buttonQuestion" onclick="next_question(-2/3)" style="background-color: #f44336;">Rather disagree</button>
  37. <button class="buttonQuestion" onclick="next_question(-1)" style="background-color: #b71c1c;">Absolutely disagree</button>
  38. </div>
  39. <div class="navButtons">
  40. <button class="button" onclick="prev_question()" id="back_button">Return to the previous question</button>
  41. <button class="button" onclick="location.href='/';" id="back_button_off">Go back to home page</button>
  42. </div>
  43. </div>
  44. </div>
  45. <div id="footer">
  46. <p>PolitiScale is an initiative of <a href="http://www.radicalisees-sur-internet.fr">“Radicalisé·e·s sur Internet”</a> which is freely inspired by <a href="https://8values.github.io/">8values</a>.</p>
  47. <p>Interested by translating PolitiScales? Please visit our <a href="https://crowdin.com/project/politiscales">Crowdin project</a>.</p>
  48. </div>
  49. <script src="/quiz.js"></script>
  50. </body>
  51. </html>