ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Format matrix solutions in a more readable way

This commit is contained in:
Ramon Wenger 2020-10-07 11:22:15 +02:00
parent 4193af9ef6
commit e94573cd09
6 changed files with 186 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/school-class/ClassSelectionWidget.vue
View File

@ -50,7 +50,7 @@
import CurrentClass from '@/components/school-class/CurrentClass'; import CurrentClass from '@/components/school-class/CurrentClass';
import AddIcon from '@/components/icons/AddIcon'; import AddIcon from '@/components/icons/AddIcon';
import updateSelectedClassMixin from '@/mixins/updateSelectedClass'; import updateSelectedClassMixin from '@/mixins/update-selected-class';
import sidebarMixin from '@/mixins/sidebar'; import sidebarMixin from '@/mixins/sidebar';
import meMixin from '@/mixins/me'; import meMixin from '@/mixins/me';

6
client/src/helpers/survey-solutions.js
View File

@ -11,11 +11,9 @@ const extractAnswerFromQuestion = (previous, question) => {
return text; return text;
}); // get the keys as they appear in the question, without punctuation at the end }); // get the keys as they appear in the question, without punctuation at the end
const answers = keys.map(key => `${key}: ${correctAnswer[key]}`); answer = keys.map(key => `${key}: ${correctAnswer[key]}`); // return an array, it gets converted to a string further up
answer = answers.join('\n');
} }
return [...previous, {title: question.title, answer}]; return [...previous, {title: question.title, answer, type: question.getType()}];
}; };
export const extractSurveySolutions = (prev, element) => { export const extractSurveySolutions = (prev, element) => {

0
client/src/mixins/updateSelectedClass.js → client/src/mixins/update-selected-class.js
View File

2
client/src/pages/oldClasses.vue
View File

@ -18,7 +18,7 @@
<script> <script>
import OLD_CLASSES_QUERY from '@/graphql/gql/oldClasses.gql'; import OLD_CLASSES_QUERY from '@/graphql/gql/oldClasses.gql';
import updateSelectedClassMixin from '@/mixins/updateSelectedClass'; import updateSelectedClassMixin from '@/mixins/update-selected-class';
export default { export default {
mixins: [updateSelectedClassMixin], mixins: [updateSelectedClassMixin],

46
client/src/pages/survey.vue
View File

@ -15,22 +15,22 @@
</template> </template>
<script> <script>
import * as SurveyVue from 'survey-vue'; import * as SurveyVue from 'survey-vue';
import {css} from '@/survey.config'; import {css} from '@/survey.config';
import SURVEY_QUERY from '@/graphql/gql/surveyQuery.gql'; import SURVEY_QUERY from '@/graphql/gql/surveyQuery.gql';
import MODULE_QUERY from '@/graphql/gql/moduleByIdQuery.gql'; import MODULE_QUERY from '@/graphql/gql/moduleByIdQuery.gql';
import UPDATE_ANSWER from '@/graphql/gql/mutations/updateAnswer.gql'; import UPDATE_ANSWER from '@/graphql/gql/mutations/updateAnswer.gql';
import Solution from '@/components/content-blocks/Solution'; import Solution from '@/components/content-blocks/Solution';
import {extractSurveySolutions} from '@/helpers/survey-solutions'; import {extractSurveySolutions} from '@/helpers/survey-solutions';
import {isTeacher} from '@/helpers/is-teacher'; import {isTeacher} from '@/helpers/is-teacher';
import {meQuery} from '@/graphql/queries'; import {meQuery} from '@/graphql/queries';
const Survey = SurveyVue.Survey; const Survey = SurveyVue.Survey;
export default { export default {
props: ['id'], props: ['id'],
components: { components: {
@ -58,17 +58,27 @@
return (module.solutionsEnabled || isTeacher) && !this.survey.isCompleted; return (module.solutionsEnabled || isTeacher) && !this.survey.isCompleted;
}, },
solution() { solution() {
// todo: should this be done inside of Solution.vue?
return { return {
text: this.answers.reduce((previous, answer) => { text: this.answers.reduce((previous, answer) => {
if (!answer.answer) { if (!answer.answer) {
return previous; return previous;
} }
const answerText = answer.answer.replace(/\n/g, '<br>'); // replace all newlines with line breaks if (answer.type === 'matrix') {
// wrap all the answers inside li tags and convert to a single string
const answerText = answer.answer.map(a => `<li class="solution-text__list-item">${a}</li>`).join('');
return ` return `
${previous} ${previous}
<h2 class="solution-text__heading">${answer.title}</h2> <h2 class="solution-text__heading">${answer.title}</h2>
<p class="solution-text__answer">${answerText}</p> <ul class="solution-text__answer solution-text__list">${answerText}</ul>
`; `;
} else {
return `
${previous}
<h2 class="solution-text__heading">${answer.title}</h2>
<p class="solution-text__answer">${answer.answer}</p>
`;
}
}, '') }, '')
}; };
}, },
@ -185,14 +195,14 @@
}, },
me: meQuery me: meQuery
} }
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "@/styles/_variables.scss"; @import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss"; @import "@/styles/_mixins.scss";
.survey-page { .survey-page {
max-width: 800px; max-width: 800px;
display: grid; display: grid;
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
@ -206,5 +216,5 @@
@include meta-title; @include meta-title;
margin: 0; margin: 0;
} }
} }
</style> </style>

10
client/src/styles/_solutions.scss
View File

@ -8,4 +8,14 @@
@include regular-text; @include regular-text;
margin-bottom: $medium-spacing; margin-bottom: $medium-spacing;
} }
&__list {
list-style: disc;
padding-left: $medium-spacing;
}
&__list-item {
@include inline-title;
margin-bottom: $medium-spacing;
}
} }