develop-candymat #5
|
@ -6,7 +6,7 @@
|
||||||
<span>/{{ thesesCount }}</span>
|
<span>/{{ thesesCount }}</span>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
:disabled="currentThesis === 1"
|
:disabled="currentThesisStep === 1"
|
||||||
class="btn-dark btn-small"
|
class="btn-dark btn-small"
|
||||||
type="button"
|
type="button"
|
||||||
@click="goBack"
|
@click="goBack"
|
||||||
|
@ -73,7 +73,7 @@
|
||||||
|
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
currentThesis: 1,
|
currentThesisStep: 1,
|
||||||
theses: [],
|
theses: [],
|
||||||
thesesCount: 0,
|
thesesCount: 0,
|
||||||
answers: []
|
answers: []
|
||||||
|
@ -98,20 +98,17 @@
|
||||||
this.$route.query.embedded === 'iframe'
|
this.$route.query.embedded === 'iframe'
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
currentThesisStep () {
|
|
||||||
return this.currentThesis
|
|
||||||
},
|
|
||||||
thesisTitle () {
|
thesisTitle () {
|
||||||
if (this.currentThesis > this.thesesCount) {
|
if (this.currentThesisStep > this.thesesCount) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
return this.getThesis(this.currentThesis).thesis[this.$i18n.locale]
|
return this.theses[this.currentThesisStep - 1].thesis[this.$i18n.locale]
|
||||||
},
|
},
|
||||||
thesisCategory () {
|
thesisCategory () {
|
||||||
if (this.currentThesis > this.thesesCount) {
|
if (this.currentThesisStep > this.thesesCount) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
return this.getThesis(this.currentThesis).category[this.$i18n.locale]
|
return this.theses[this.currentThesisStep - 1].category[this.$i18n.locale]
|
||||||
},
|
},
|
||||||
possiblePositions () {
|
possiblePositions () {
|
||||||
return possiblePositions.map(option =>
|
return possiblePositions.map(option =>
|
||||||
|
@ -139,14 +136,11 @@
|
||||||
default:
|
default:
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getThesis (id) {
|
|
||||||
return this.theses.find(t => t.id === id)
|
|
||||||
},
|
|
||||||
goBack () {
|
goBack () {
|
||||||
const thesis = this.getThesis(this.currentThesis)
|
const thesis = this.theses[this.currentThesisStep - 1]
|
||||||
const index = this.answers.findIndex(a => a.thesis === thesis.id)
|
const index = this.answers.findIndex(a => a.thesis === thesis.id)
|
||||||
this.answers.splice(index, 1)
|
this.answers.splice(index, 1)
|
||||||
this.currentThesis -= 1
|
this.currentThesisStep -= 1
|
||||||
},
|
},
|
||||||
submitAnswer (option, event) {
|
submitAnswer (option, event) {
|
||||||
if (!option) {
|
if (!option) {
|
||||||
|
@ -154,13 +148,13 @@
|
||||||
return console.warn('Invalid answer')
|
return console.warn('Invalid answer')
|
||||||
}
|
}
|
||||||
|
|
||||||
const thesis = this.getThesis(this.currentThesis)
|
const thesis = this.theses[this.currentThesisStep - 1]
|
||||||
this.answers.push({ thesis: thesis.id, position: option.position })
|
this.answers.push({ thesis: thesis.id, position: option.position })
|
||||||
this.currentThesis += 1
|
this.currentThesisStep += 1
|
||||||
event && event.target.blur()
|
event && event.target.blur()
|
||||||
window.scrollTo(0, 0)
|
window.scrollTo(0, 0)
|
||||||
|
|
||||||
if (this.currentThesis > this.thesesCount) {
|
if (this.currentThesisStep > this.thesesCount) {
|
||||||
this.forwardToResults()
|
this.forwardToResults()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -6,26 +6,26 @@ export function getPositionById (id) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export const apolloThesesQuery = gql`{
|
export const apolloThesesQuery = gql`{
|
||||||
allQuestions(orderBy: ID_ASC) {
|
allQuestions(orderBy: ROW_ID_ASC) {
|
||||||
nodes {
|
nodes {
|
||||||
category: categoryByCategoryId {
|
category: categoryByCategoryRowId {
|
||||||
nodeId
|
id
|
||||||
title
|
title
|
||||||
}
|
}
|
||||||
text
|
title
|
||||||
|
rowId
|
||||||
id
|
id
|
||||||
nodeId
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`
|
}`
|
||||||
|
|
||||||
export const apolloThesesUpdate = data => data.allQuestions.nodes.map(node => ({
|
export const apolloThesesUpdate = data => data.allQuestions.nodes.map(node => ({
|
||||||
id: node.id,
|
id: node.rowId,
|
||||||
thesis: {
|
thesis: {
|
||||||
de: node.text
|
de: node.title
|
||||||
},
|
},
|
||||||
category: {
|
category: {
|
||||||
de: node.category.title
|
de: node.category ? node.category.title : ''
|
||||||
}
|
}
|
||||||
}))
|
}))
|
||||||
|
|
||||||
|
@ -40,15 +40,15 @@ export const apolloThesesCountUpdate = data => data.allQuestions.totalCount
|
||||||
export const apolloPersonsForResultsQuery = gql`{
|
export const apolloPersonsForResultsQuery = gql`{
|
||||||
allPeople(condition: {role: CANDYMAT_CANDIDATE}) {
|
allPeople(condition: {role: CANDYMAT_CANDIDATE}) {
|
||||||
nodes {
|
nodes {
|
||||||
nodeId
|
id
|
||||||
firstName
|
firstName
|
||||||
lastName
|
lastName
|
||||||
id
|
rowId
|
||||||
answersByPersonId {
|
answers: answersByPersonRowId {
|
||||||
nodes {
|
nodes {
|
||||||
nodeId
|
id
|
||||||
position
|
position
|
||||||
questionId
|
questionRowId
|
||||||
text
|
text
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -57,11 +57,11 @@ export const apolloPersonsForResultsQuery = gql`{
|
||||||
}`
|
}`
|
||||||
|
|
||||||
export const apolloPersonsForResultsUpdate = data => data.allPeople.nodes.map(person => ({
|
export const apolloPersonsForResultsUpdate = data => data.allPeople.nodes.map(person => ({
|
||||||
id: person.id,
|
id: person.rowId,
|
||||||
name: `${person.firstName} ${person.lastName}`,
|
name: `${person.firstName} ${person.lastName}`,
|
||||||
token: person.firstName.charAt(0) + person.lastName.charAt(0),
|
token: person.firstName.charAt(0) + person.lastName.charAt(0),
|
||||||
positions: person.answersByPersonId.nodes.map(answer => ({
|
positions: person.answers.nodes.map(answer => ({
|
||||||
thesis: answer.questionId,
|
thesis: answer.questionRowId,
|
||||||
position: getPositionById(answer.position),
|
position: getPositionById(answer.position),
|
||||||
statement: {
|
statement: {
|
||||||
de: answer.text
|
de: answer.text
|
||||||
|
@ -71,45 +71,39 @@ export const apolloPersonsForResultsUpdate = data => data.allPeople.nodes.map(pe
|
||||||
|
|
||||||
export const apolloPersonPositionsQuery = gql`
|
export const apolloPersonPositionsQuery = gql`
|
||||||
query Person($partyId: Int!) {
|
query Person($partyId: Int!) {
|
||||||
personById(id: $partyId) {
|
personByRowId(rowId: $partyId) {
|
||||||
nodeId
|
|
||||||
id
|
id
|
||||||
firstName
|
firstName
|
||||||
lastName
|
lastName
|
||||||
answersByPersonId {
|
answers: answersByPersonRowId {
|
||||||
nodes {
|
nodes {
|
||||||
nodeId
|
id
|
||||||
position
|
position
|
||||||
personId
|
personRowId
|
||||||
text
|
text
|
||||||
questionByQuestionId {
|
question: questionByQuestionRowId {
|
||||||
nodeId
|
|
||||||
categoryByCategoryId {
|
|
||||||
nodeId
|
|
||||||
title
|
|
||||||
}
|
|
||||||
text
|
|
||||||
id
|
id
|
||||||
description
|
rowId
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`
|
}`
|
||||||
|
|
||||||
export const apolloPersonPositionsUpdate = data => ({
|
export const apolloPersonPositionsUpdate = data => {
|
||||||
id: data.personById.id,
|
const person = data.personByRowId
|
||||||
name: `${data.personById.firstName} ${data.personById.lastName}`,
|
return {
|
||||||
token: data.personById.firstName.charAt(0) + data.personById.lastName.charAt(0),
|
id: person.rowId,
|
||||||
theses: data.personById.answersByPersonId.nodes.map(answer => {
|
name: `${person.firstName} ${person.lastName}`,
|
||||||
const question = answer.questionByQuestionId
|
token: person.firstName.charAt(0) + person.lastName.charAt(0),
|
||||||
return {
|
theses: person.answers ? person.answers.nodes.map(answer => {
|
||||||
id: question.id,
|
const question = answer.question
|
||||||
thesis: question.text,
|
return question ? {
|
||||||
category: question.categoryByCategoryId.title,
|
id: question.rowId,
|
||||||
position: getPositionById(answer.position),
|
position: getPositionById(answer.position),
|
||||||
statement: answer.text,
|
statement: answer.text,
|
||||||
showStatement: false
|
showStatement: false
|
||||||
}
|
} : null
|
||||||
})
|
}) : []
|
||||||
})
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -73,7 +73,7 @@ function getUserPosition (row) {
|
||||||
// ...
|
// ...
|
||||||
// ]
|
// ]
|
||||||
function getScoringGrid (userAnswers, emphasizedTheses, parties) {
|
function getScoringGrid (userAnswers, emphasizedTheses, parties) {
|
||||||
return userAnswers.map(answer => (
|
const grid = userAnswers.map(answer => (
|
||||||
{
|
{
|
||||||
thesis: answer.thesis,
|
thesis: answer.thesis,
|
||||||
emphasis: emphasizedTheses.filter(e => e.thesis === answer.thesis).length >= 1,
|
emphasis: emphasizedTheses.filter(e => e.thesis === answer.thesis).length >= 1,
|
||||||
|
@ -83,6 +83,7 @@ function getScoringGrid (userAnswers, emphasizedTheses, parties) {
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
))
|
))
|
||||||
|
return grid
|
||||||
}
|
}
|
||||||
|
|
||||||
function getPartyPositions (thesis, parties) {
|
function getPartyPositions (thesis, parties) {
|
||||||
|
@ -91,15 +92,16 @@ function getPartyPositions (thesis, parties) {
|
||||||
return {
|
return {
|
||||||
type: 'party',
|
type: 'party',
|
||||||
party: party.id,
|
party: party.id,
|
||||||
position: (position && position.position) || {}
|
position: (position && position.position) || 'skipped'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export function evalPointsPerThesisPerParty (partyPosition, userPosition, emphasis) {
|
export function evalPointsPerThesisPerParty (partyPosition, userPosition, emphasis) {
|
||||||
let score = 0
|
let score = 0
|
||||||
|
if (partyPosition === 'skipped' || userPosition === 'skipped') {
|
||||||
if (userPosition === partyPosition) {
|
score = MIN_POINTS
|
||||||
|
} else if (userPosition === partyPosition) {
|
||||||
score = MAX_POINTS
|
score = MAX_POINTS
|
||||||
} else if (
|
} else if (
|
||||||
(userPosition === 'positive' && partyPosition === 'neutral') ||
|
(userPosition === 'positive' && partyPosition === 'neutral') ||
|
||||||
|
|
|
@ -90,13 +90,19 @@ describe('The evalPointsPerThesisPerParty fucntion', () => {
|
||||||
${'negative'} | ${'negative'} | ${2} | ${4}
|
${'negative'} | ${'negative'} | ${2} | ${4}
|
||||||
${'negative'} | ${'neutral'} | ${1} | ${2}
|
${'negative'} | ${'neutral'} | ${1} | ${2}
|
||||||
${'negative'} | ${'positive'} | ${0} | ${0}
|
${'negative'} | ${'positive'} | ${0} | ${0}
|
||||||
|
${'negative'} | ${'skipped'} | ${0} | ${0}
|
||||||
${'neutral'} | ${'negative'} | ${1} | ${2}
|
${'neutral'} | ${'negative'} | ${1} | ${2}
|
||||||
${'neutral'} | ${'neutral'} | ${2} | ${4}
|
${'neutral'} | ${'neutral'} | ${2} | ${4}
|
||||||
${'neutral'} | ${'positive'} | ${1} | ${2}
|
${'neutral'} | ${'positive'} | ${1} | ${2}
|
||||||
|
${'neutral'} | ${'skipped'} | ${0} | ${0}
|
||||||
${'positive'} | ${'negative'} | ${0} | ${0}
|
${'positive'} | ${'negative'} | ${0} | ${0}
|
||||||
${'positive'} | ${'neutral'} | ${1} | ${2}
|
${'positive'} | ${'neutral'} | ${1} | ${2}
|
||||||
${'positive'} | ${'positive'} | ${2} | ${4}
|
${'positive'} | ${'positive'} | ${2} | ${4}
|
||||||
${'positive'} | ${'skipped'} | ${0} | ${0}
|
${'positive'} | ${'skipped'} | ${0} | ${0}
|
||||||
|
${'skipped'} | ${'negative'} | ${0} | ${0}
|
||||||
|
${'skipped'} | ${'neutral'} | ${0} | ${0}
|
||||||
|
${'skipped'} | ${'positive'} | ${0} | ${0}
|
||||||
|
${'skipped'} | ${'skipped'} | ${0} | ${0}
|
||||||
`('returns the correct score (according to the Rechenmodell of the bpb' +
|
`('returns the correct score (according to the Rechenmodell of the bpb' +
|
||||||
' if the party position is $partyPosition and the user\'s position is $userPosition',
|
' if the party position is $partyPosition and the user\'s position is $userPosition',
|
||||||
({ partyPosition, userPosition, expectedScore, expectedScoreWithEmphasis }) => {
|
({ partyPosition, userPosition, expectedScore, expectedScoreWithEmphasis }) => {
|
||||||
|
|
|
@ -47,18 +47,18 @@
|
||||||
</h2>
|
</h2>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li v-for="thesis in party.theses" :key="thesis.id">
|
<li v-for="thesis in theses" :key="thesis.id">
|
||||||
<div class="thesis-facts">
|
<div class="thesis-facts">
|
||||||
<div class="list-thesis" @click="toggleStatement(thesis)">
|
<div class="list-thesis" @click="toggleStatement(thesis)">
|
||||||
<div class="thesis-subline">
|
<div class="thesis-subline">
|
||||||
<component :is="'feather-' + chevronIcon(thesis.showStatement)" />
|
<component :is="'feather-' + chevronIcon(thesis.showStatement)" />
|
||||||
<span>{{ thesis.category }}</span>
|
<span>{{ thesis.category[$i18n.locale] }}</span>
|
||||||
</div>
|
</div>
|
||||||
<h3>{{ thesis.thesis }}</h3>
|
<h3>{{ thesis.thesis[$i18n.locale] }}</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="statements-party">
|
<div class="statements-party">
|
||||||
<component :is="'feather-' + positionToIconName(thesis.position)" />
|
<component :is="'feather-' + positionToIconName(getPartyPosition(thesis))" />
|
||||||
</div>
|
</div>
|
||||||
<div v-if="!!answers" class="statements-user">
|
<div v-if="!!answers" class="statements-user">
|
||||||
<component :is="'feather-' + getUserPosition(thesis.id)" />
|
<component :is="'feather-' + getUserPosition(thesis.id)" />
|
||||||
|
@ -68,7 +68,7 @@
|
||||||
<div v-show="thesis.showStatement" class="thesis-statement">
|
<div v-show="thesis.showStatement" class="thesis-statement">
|
||||||
<p><strong>{{ $t('party.partyAnswer') }}:</strong></p>
|
<p><strong>{{ $t('party.partyAnswer') }}:</strong></p>
|
||||||
<blockquote>
|
<blockquote>
|
||||||
{{ thesis.statement }}
|
{{ getPartyStatement(thesis) }}
|
||||||
</blockquote>
|
</blockquote>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
@ -87,7 +87,11 @@
|
||||||
<script>
|
<script>
|
||||||
import possiblePositions from '@/app/euromat/possiblePositions'
|
import possiblePositions from '@/app/euromat/possiblePositions'
|
||||||
import { getTranslatedUrl } from '@/i18n/helper'
|
import { getTranslatedUrl } from '@/i18n/helper'
|
||||||
import { apolloPersonPositionsQuery, apolloPersonPositionsUpdate } from '@/app/euromat/graphqlQueries'
|
import {
|
||||||
|
apolloPersonPositionsQuery,
|
||||||
|
apolloPersonPositionsUpdate,
|
||||||
|
apolloThesesQuery, apolloThesesUpdate
|
||||||
|
} from '@/app/euromat/graphqlQueries'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Party',
|
name: 'Party',
|
||||||
|
@ -129,6 +133,7 @@
|
||||||
name: 'Loading ...',
|
name: 'Loading ...',
|
||||||
theses: []
|
theses: []
|
||||||
},
|
},
|
||||||
|
theses: [],
|
||||||
answers,
|
answers,
|
||||||
possiblePositions
|
possiblePositions
|
||||||
}
|
}
|
||||||
|
@ -143,9 +148,15 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
update: apolloPersonPositionsUpdate
|
update: apolloPersonPositionsUpdate
|
||||||
|
},
|
||||||
|
theses: {
|
||||||
|
query: apolloThesesQuery,
|
||||||
|
update: data => {
|
||||||
|
const allTheses = apolloThesesUpdate(data)
|
||||||
|
return allTheses.map(thesis => ({ ...thesis, showStatement: false }))
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
resultsPath () {
|
resultsPath () {
|
||||||
return getTranslatedUrl('results', getTranslatedUrl('theses', null, true))
|
return getTranslatedUrl('results', getTranslatedUrl('theses', null, true))
|
||||||
|
@ -156,6 +167,17 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
getPartyAnswerForThesis (thesis) {
|
||||||
|
return this.party.theses.find(partyThesis => partyThesis.id === thesis.id)
|
||||||
|
},
|
||||||
|
getPartyPosition (thesis) {
|
||||||
|
const partyAnswerForThesis = this.getPartyAnswerForThesis(thesis)
|
||||||
|
return partyAnswerForThesis ? partyAnswerForThesis.position : 'skipped'
|
||||||
|
},
|
||||||
|
getPartyStatement (thesis) {
|
||||||
|
const partyAnswerForThesis = this.getPartyAnswerForThesis(thesis)
|
||||||
|
return partyAnswerForThesis ? partyAnswerForThesis.statement : ''
|
||||||
|
},
|
||||||
chevronIcon (showStatement) {
|
chevronIcon (showStatement) {
|
||||||
return showStatement
|
return showStatement
|
||||||
? 'chevron-up'
|
? 'chevron-up'
|
||||||
|
|
Loading…
Reference in a new issue