A simple system for creating multiple-choice questions for an audience to answer on their phones. Responses are tallied and displayed in real-time. https://openquestion.netsyms.com
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

128 lines
5.1KB

  1. <?php
  2. include __DIR__ . "/../bits/navbar.php";
  3. ?>
  4. <style nonce="<?php echo $SECURE_NONCE; ?>">
  5. .progress {
  6. height: 2vh;
  7. }
  8. </style>
  9. <div class="container">
  10. <?php if (!$database->has('questions', ['qcode' => $arg1])) { ?>
  11. <div class="alert alert-warning">Whoops! There isn't a question with that ID code.</div>
  12. <?php
  13. die();
  14. }
  15. ?>
  16. <?php
  17. $qid = $database->get('questions', 'qid', ['qcode' => $arg1]);
  18. ?>
  19. <div class="row mt-4">
  20. <div class="col-12 col-md-6">
  21. <h1><?php echo $database->get('questions', 'qtext', ['qid' => $qid]); ?></h1>
  22. </div>
  23. <div class="col-12 col-md-6">
  24. <div class="card">
  25. <div class="card-body">
  26. <h5><?php
  27. $url = ""; //(isset($_SERVER['https']) && $_SERVER['https'] != "" ? "https" : "http") . "://";
  28. $url .= $_SERVER['HTTP_HOST'];
  29. $url .= SITE_PATH . "respond";
  30. echo $url;
  31. ?></h5>
  32. <h3>Code: <?php echo $arg1; ?></h3>
  33. </div>
  34. </div>
  35. </div>
  36. </div>
  37. <div class="nav nav-tabs">
  38. <a class="nav-item nav-link active" data-toggle="tab" href="#totals" role="tab">Totals</a>
  39. <a class="nav-item nav-link" data-toggle="tab" href="#results" role="tab">Results</a>
  40. </div>
  41. <div class="tab-content">
  42. <div class="list-group tab-pane fade show active" id="totals" role="tabpanel">
  43. <?php
  44. $total = $database->count('responses', ['qid' => $qid]);
  45. $answers = $database->select('answers', ['aid', 'atext'], ['qid' => $qid]);
  46. $colors = ["primary", "success", "danger", "info", "warning"];
  47. $color = -1;
  48. foreach ($answers as $a) {
  49. $color++;
  50. if ($color > count($colors) - 1) {
  51. $color = 0;
  52. }
  53. $votes = $database->count('responses', ['aid' => $a['aid']]);
  54. ?>
  55. <div class="list-group-item">
  56. <h3 class="d-flex"><?php echo $a['atext']; ?> <span class="small ml-auto" id="votes_<?php echo $a['aid']; ?>"><?php echo $votes; ?> votes</span></h3>
  57. <style nonce="<?php echo $SECURE_NONCE; ?>">
  58. #progress_<?php echo $a['aid']; ?> {
  59. width: <?php echo ($votes / $total) * 100.0; ?>%;
  60. }
  61. </style>
  62. <div class="progress">
  63. <div id="progress_<?php echo $a['aid']; ?>" class="progress-bar bg-<?php echo $colors[$color]; ?>" role="progressbar"></div>
  64. </div>
  65. </div>
  66. <?php
  67. }
  68. ?>
  69. </div>
  70. <div class="tab-pane fade card-columns pt-3" id="results" role="tabpanel">
  71. <?php
  72. $color = -1;
  73. foreach ($answers as $a) {
  74. $color++;
  75. if ($color > count($colors) - 1) {
  76. $color = 0;
  77. }
  78. ?>
  79. <div class="card border-<?php echo $colors[$color]; ?>">
  80. <div class="card-body">
  81. <h4 class="card-title text-<?php echo $colors[$color]; ?>"><?php echo $a['atext']; ?></h4>
  82. <div class="list-group" id="answer_<?php echo $a['aid']; ?>_list">
  83. <?php
  84. $users = $database->select('responses', 'name', ['aid' => $a['aid']]);
  85. foreach ($users as $u) {
  86. if ($u == null) {
  87. $u = "Anonymous";
  88. }
  89. ?>
  90. <div class="list-group-item">
  91. <?php echo $u; ?>
  92. </div>
  93. <?php
  94. }
  95. ?>
  96. </div>
  97. </div>
  98. </div>
  99. <?php
  100. }
  101. ?>
  102. </div>
  103. </div>
  104. </div>
  105. <script nonce="<?php echo $SECURE_NONCE; ?>">
  106. setInterval(function () {
  107. $.getJSON('<?php echo SITE_PATH; ?>getresults.php', {
  108. qid: <?php echo $qid; ?>
  109. }, function (data) {
  110. var answers = data['answers'];
  111. var responses = data['responses'];
  112. for (var i = 0; i < answers.length; i++) {
  113. $('#progress_' + answers[i]['id']).css('width', answers[i]['percent']);
  114. $('#votes_' + answers[i]['id']).text(answers[i]['votes'] + " votes");
  115. }
  116. for (var i = 0; i < responses.length; i++) {
  117. $('#answer_' + responses[i]['aid'] + "_list").html("");
  118. }
  119. for (var i = 0; i < responses.length; i++) {
  120. $('#answer_' + responses[i]['aid'] + "_list").append("<div class=\"list-group-item\">" + responses[i]['name'] + "</div>");
  121. }
  122. });
  123. }, 1000);
  124. </script>