[UI] Dynamic Survey View - Ask teacher for class info #4612

app.py

@@ -42,7 +42,7 @@
 from utils import dump_yaml_rt, is_debug_mode, load_yaml_rt, timems, version, strip_accents
 from website import (ab_proxying, achievements, admin, auth_pages, aws_helpers,
                      cdn, classes, database, for_teachers, s3_logger, parsons,
-                     profile, programs, querylog, quiz, statistics,
+                     profile, programs, querylog, quiz, statistics, surveys,
                      translating, tags)
 from website.auth import (current_user, is_admin, is_teacher, is_second_teacher, has_public_profile,
                           login_user_from_token_cookie, requires_login, requires_login_redirect, requires_teacher,
@@ -106,6 +106,7 @@
 ACHIEVEMENTS_TRANSLATIONS = hedyweb.AchievementTranslations()
 DATABASE = database.Database()
 ACHIEVEMENTS = achievements.Achievements(DATABASE, ACHIEVEMENTS_TRANSLATIONS)
+SURVEYS = surveys.SurveysModule(DATABASE)
 
 TAGS = collections.defaultdict(hedy_content.NoSuchAdventure)
 for lang in ALL_LANGUAGES.keys():
@@ -2485,6 +2486,7 @@ def current_user_allowed_to_see_program(program):
 app.register_blueprint(statistics.StatisticsModule(DATABASE))
 app.register_blueprint(statistics.LiveStatisticsModule(DATABASE))
 app.register_blueprint(tags.TagsModule(DATABASE, ACHIEVEMENTS))
+app.register_blueprint(surveys.SurveysModule(DATABASE))
 
 
 # *** START SERVER ***

messages.pot

@@ -290,6 +290,24 @@ msgstr ""
 msgid "class_overview"
 msgstr ""
 
+msgid "class_survey_description"
+msgstr ""
+
+msgid "class_survey_later"
+msgstr ""
+
+msgid "class_survey_question1"
+msgstr ""
+
+msgid "class_survey_question2"
+msgstr ""
+
+msgid "class_survey_question3"
+msgstr ""
+
+msgid "class_survey_question4"
+msgstr ""
+
 msgid "close"
 msgstr ""
 
@@ -1289,6 +1307,9 @@ msgstr ""
 msgid "retrieve_tag_error"
 msgstr ""
 
+msgid "retrieve_tag_error"
+msgstr ""
+
 msgid "role"
 msgstr ""
 
@@ -1469,6 +1490,12 @@ msgstr ""
 msgid "surname"
 msgstr ""
 
+msgid "survey_skip"
+msgstr ""
+
+msgid "survey_submit"
+msgstr ""
+
 msgid "tag_in_adventure"
 msgstr ""
 

static/css/generated.full.css

@@ -5521,6 +5521,10 @@ code {
   margin-top: -2rem;
 }
 
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
 .mt-auto {
   margin-top: auto;
 }
@@ -16040,9 +16044,9 @@ code {
   border-color: rgb(104 211 145 / var(--tw-border-opacity));
 }
 
-.border-blue-600 {
+.border-green-400 {
   --tw-border-opacity: 1;
-  border-color: rgb(49 130 206 / var(--tw-border-opacity));
+  border-color: rgb(104 211 145 / var(--tw-border-opacity));
 }
 
 .border-blue-500 {

templates/class-overview.html

@@ -144,5 +144,8 @@ <h2>{{_('pending_invites')}}</h2>
         </div>
       {% endif %}
     </div>
+    {% if survey_id and description and questions and survey_later %}
+      {{ render_partial('htmx-survey.html', survey_id=survey_id, description=description, questions=questions, survey_later=survey_later) }}
+    {% endif %}
 </div>
 {% endblock %}

templates/htmx-survey.html

@@ -0,0 +1,42 @@
+{% block regular_content %}
+<div id="survey" class="flex absolute inset-0 items-center justify-center">
+    <div class="bg-blue-500 border border-black rounded-lg px-8 py-4 text-center">
+        <div id="description" class="text-white mb-8 text-l">{{ _(description) }}</div>
+        <form id="survey-form">
+        {% for question in questions %}
+        <div class="mb-4">
+                    <div id="question" class="text-white mb-4 text-xl">{{ _(question) }}</div>
+                    <div class="flex flex-row justify-center space-x-1">
+                        <input autofocus="autofocus" id="input" type="text" class="flex items-center border border-green-400 rounded p-2 px-3 w-4/5 mx-auto" name="{{ question }}">
+                    </div>
+                </div>
+            {% endfor %}
+            <div class="mt-4 flex flex-row gap-2 justify-center">
+                <button type="submit" class="green-btn block mx-auto w-40 pb-4 pt-4"
+                hx-trigger="click"
+                hx-post="/surveys/submit-survey/{{ survey_id }}"
+                hx-include="[name='question']"
+                hx-swap="innerHTML"
+                _="on click toggle .hidden on #survey">
+                {{_('survey_submit')}}</button>
+                <button type="remind_later" class="red-btn block mx-auto w-40 pb-4 pt-4"
+                hx-trigger="click"
+                hx-post="/surveys/remind-later-survey/{{ survey_id }}"
+                hx-swap="innerHTML"
+                _="on click toggle .hidden on #survey">
+                {{_(survey_later)}}</button>
+            </div>
+            <div class="flex-row justify-center">
+            <button type="skip" class="text-white m-1 w-40 pb-4 pt-4"
+                hx-trigger="click"
+                hx-post="/surveys/skip-survey/{{ survey_id }}"
+                hx-swap="innerHTML"
+                _="on click toggle .hidden on #survey">
+                <u>{{_('survey_skip')}}</u></button>
+            </div>
+        </form>
+        </div>
+        </div>
+    </div>
+{% endblock %}
+

tests/cypress/e2e/for-teacher_page/class_page/add_student_copy_link.cy.js

@@ -8,6 +8,7 @@ describe('Is able to see copy link to add student to class', () => {
 
 
     cy.get(".view_class").first().click();
+    cy.get('body').then($b => $b.find("#survey")).then($s => $s.length && $s.hide())
     cy.get('#add-student').click();
     cy.get('#copy-join-link').should('be.visible').should('be.enabled').click();
 

tests/cypress/e2e/for-teacher_page/class_page/add_student_invite_by_username.cy.js

@@ -8,6 +8,7 @@ describe('Is able to add student by name', () => {
     cy.wait(500);
 
     cy.get(".view_class").first().click();
+    cy.get('body').then($b => $b.find("#survey")).then($s => $s.length && $s.hide())
 
     //delete student1 if in class
 

tests/cypress/e2e/for-teacher_page/class_page/customize_class_button.cy.js

@@ -12,6 +12,7 @@ describe('Is able to go to logs page', () => {
     var currentUrl = '';
     cy.url().then(url => {
       currentUrl = url;
+      cy.get('#survey').invoke('hide').should('not.be.visible');
       cy.get('#customize-class-button').click(); // Press logs button
 
       let statsUrl = Cypress.env('customize_class_page') + currentUrl.substring(currentUrl.indexOf('class/')+6);

tests/cypress/e2e/for-teacher_page/customize_class_page/customize_class_second_teacher.cy.js

@@ -6,6 +6,7 @@ describe('customize class page', () => {
       // ensureIsSecondTeacher("teacher1", "teacher2")
       // await ensureClass();
       cy.getBySel('view_class_link').first().click(); // Press on view class button
+      cy.get('body').then($b => $b.find("#survey")).then($s => $s.length && $s.hide())
       cy.getBySel('customize_class_button').click(); // Press customize class button
 
       // Remove any customizations that already exist to get the class into a predictable state

tests/cypress/e2e/tools/classes/class.js

@@ -53,6 +53,7 @@ export function addStudents(classname, count) {
     cy.get(".view_class").contains(new RegExp(`^${classname}$`)).click();
     cy.wait(500);
 
+    cy.get('body').then($b => $b.find("#survey")).then($s => $s.length && $s.hide())
     cy.get('#add-student').click();
     cy.get('#create-accounts').click();
     cy.wrap(students).each((student, index) => {

translations/ar/LC_MESSAGES/messages.po

@@ -397,6 +397,24 @@ msgstr "أدخل اسم الصف رجاء"
 msgid "class_overview"
 msgstr "Class overview"
 
+msgid "class_survey_description"
+msgstr ""
+
+msgid "class_survey_later"
+msgstr ""
+
+msgid "class_survey_question1"
+msgstr ""
+
+msgid "class_survey_question2"
+msgstr ""
+
+msgid "class_survey_question3"
+msgstr ""
+
+msgid "class_survey_question4"
+msgstr ""
+
 #, fuzzy
 msgid "close"
 msgstr "Sluiten"
@@ -1777,6 +1795,12 @@ msgstr ""
 msgid "surname"
 msgstr "الاسم الأول"
 
+msgid "survey_skip"
+msgstr ""
+
+msgid "survey_submit"
+msgstr ""
+
 msgid "tag_in_adventure"
 msgstr ""
 
@@ -2220,3 +2244,9 @@ msgstr "Your program"
 #~ msgid "tag_deleted"
 #~ msgstr "لقد تم حذف العلامة"
 
+#~ msgid "survey_later"
+#~ msgstr ""
+
+#~ msgid "class_survey_questions"
+#~ msgstr ""
+