Add more information to activity session cards

thaddeusm · Nov 16, 2019 · 147c86e · 147c86e
1 parent 0f846ce
commit 147c86e
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 1 deletion.
diff --git a/src/views/SessionExplorer.vue b/src/views/SessionExplorer.vue
@@ -36,6 +36,10 @@
         		</section>
             </header>
             <section v-if="loaded && session.activity.activityType == 'response pool' && !responsesMissing" class="response-pool">
+                <h3 class="prompt">
+                    {{ session.activity.content.prompt }}
+                </h3>
+                <h2>Responses</h2>
                 <ul v-if="session.responses.length > 0" id="responsePoolList">
                     <li v-for="(response, index) in session.responses" v-if="response.response.text" :key="`response${index}`">
                         <h4>{{ response.response.text }}</h4>
@@ -128,7 +132,7 @@
                 </div>
                 <div id="responseArea">
                     <h2>
-                        Individual Responses
+                        Content Assignments
                     </h2>
                     <sequential-entrance fromTop delay="20">
                         <div 
@@ -341,6 +345,8 @@ export default {
                 .then((results) => {
                     this.session = results[0]
                     this.loaded = true
+
+                    console.log(results)
                 })
 		},
 		routeBack() {
@@ -549,6 +555,10 @@ ul {
     margin: 50px 0 5px 0;
 }
 
+#responsePoolList > li > h4:first-child {
+    margin: 20px 0 5px 0;
+}
+
 #responsePoolList > li > h5 {
     text-align: right;
     margin-bottom: 50px;
@@ -721,6 +731,16 @@ a {
     color: var(--white)!important;
 }
 
+.prompt {
+    background: var(--white);
+    padding: 50px;
+    margin-bottom: 75px;
+}
+
+h2 {
+    text-align: center;
+}
+
 .fade-enter-active, .fade-leave-active {
 	transition: opacity .2s;
 }

diff --git a/src/views/Student.vue b/src/views/Student.vue
@@ -98,6 +98,15 @@
                         <section class="activity-body">
                             <h5>{{ session.activity.name }}</h5>
                             <span class="date-text">on {{ makePrettyDate(session.date._d) }}</span>
+                            <p class="response-text" v-if="session.responses.response.text">
+                                {{ session.responses.response.text }}
+                            </p>
+                            <p class="response-text" v-else-if="session.responses.response.choice">
+                                {{ session.responses.response.choice }}
+                            </p>
+                            <p class="response-text" v-else>
+                                (Click the button below to view complete session records.)
+                            </p>
                             <button @click="routeToActivitySession(session._id)">view session</button>
                         </section>
                     </div>
@@ -441,6 +450,7 @@ export default {
                                 
                                 if (respondent == this.student._id) {
                                     studentResults.push(result)
+                                    result.responses = result.responses[j]
                                     break
                                 }
                             }
@@ -453,6 +463,8 @@ export default {
                             return dateA < dateB ? 1 : -1
                         })
 
+                        console.log(this.activitySessions)
+
                         this.activitiesLoaded = true
                     } 
                 })
@@ -963,6 +975,7 @@ main {
     border-radius: 10px;
     box-shadow: 1px 2px 1px 2px var(--gray);
     align-items: center;
+    padding: 10px;
 }
 
 .activity-body > h5 {
@@ -983,6 +996,18 @@ main {
     margin: 25px auto;
 }
 
+.activity-body > p {
+    font-weight: 100;
+    background: var(--white);
+    padding: 5px 12px;
+    border-radius: 3px;
+    height: 60px;
+    overflow: auto;
+    margin: 15px 0 10px 0;
+    text-align: left;
+    box-shadow: 1px 1px 5px 1px var(--light-gray);
+}
+
 .fade-enter-active, .fade-leave-active {
 	transition: opacity .2s;
 }