Compare commits
No commits in common. "8962aad738ca2cd5f0516c9cc7b7cd8543f91f57" and "eca3b5b98d2990f47c5a6b36efccec51a8b74b4c" have entirely different histories.
8962aad738
...
eca3b5b98d
|
|
@ -1,6 +1,6 @@
|
|||
# Scores Ceiba
|
||||
# Ceiba Score App
|
||||
|
||||
Vous trouverez ici le code source de l'application de Scores de [Ceiba Conseil](https://www.ceiba-conseil.com/).
|
||||
Vous trouverez ici le code source de l'application de Score de Ceiba Conseil.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Scores Ceiba</title>
|
||||
<title>Ceiba Scores</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
|
|
@ -51,10 +51,6 @@ html, body, #app {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
|
|
|
|||
|
|
@ -30,116 +30,54 @@ function slideMove(splide, newIndex) {
|
|||
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="center">
|
||||
<div class="top">
|
||||
<legend>{{ question.title }}</legend>
|
||||
|
||||
<div class="images">
|
||||
<template v-if="question.answers">
|
||||
<Splide
|
||||
@splide:move="slideMove"
|
||||
class="answers"
|
||||
:id="`question_${question.id}`"
|
||||
ref="slides"
|
||||
>
|
||||
<SplideSlide
|
||||
v-for="answer in question.answers"
|
||||
:key="answer.id"
|
||||
@click="$emit('nextQuestion')"
|
||||
>
|
||||
<img height="200" :src="`/answers/${answer.image}.webp`" />
|
||||
</SplideSlide>
|
||||
</Splide>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<template v-if="question.answers">
|
||||
<ul class="choices">
|
||||
<li class="choice" v-for="answer in question.answers" :key="answer.id">
|
||||
<div class="choice" v-for="answer in question.answers" :key="answer.id">
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
:data-answerId="answer.id"
|
||||
:name="`question_${question.id}`"
|
||||
:id="`question_${question.id}_answer_${answer.id}`"
|
||||
:value="answer.weight"
|
||||
v-model="answerWeight"
|
||||
@change="selectAnswer(answer)"
|
||||
@click="nextQuestion"
|
||||
/>
|
||||
<label :for="`question_${question.id}_answer_${answer.id}`">
|
||||
{{ answer.title }}
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
{{ answer.title }}
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<template v-if="question.answers">
|
||||
<Splide
|
||||
@splide:move="slideMove"
|
||||
class="answers"
|
||||
:id="`question_${question.id}`"
|
||||
ref="slides"
|
||||
>
|
||||
<SplideSlide
|
||||
v-for="answer in question.answers"
|
||||
:key="answer.id"
|
||||
@click="$emit('nextQuestion')"
|
||||
>
|
||||
<img height="200" :src="`/answers/${answer.image}.webp`" />
|
||||
</SplideSlide>
|
||||
</Splide>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="sass">
|
||||
.splide__arrow
|
||||
background: transparent
|
||||
border: 3px solid var(--color-green)
|
||||
width: 3rem
|
||||
height: 3rem
|
||||
opacity: 1
|
||||
|
||||
svg
|
||||
fill: var(--color-green)
|
||||
height: 1.6rem
|
||||
width: 1.6rem
|
||||
.splide__pagination
|
||||
bottom: -1.5em
|
||||
.splide__pagination__page
|
||||
width: .7rem
|
||||
height: .7rem
|
||||
background: var(--color-green)
|
||||
|
||||
&.is-active
|
||||
background: var(--color-green)
|
||||
</style>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
|
||||
legend
|
||||
text-align: center
|
||||
font-size: 1.4rem
|
||||
line-height: 2rem
|
||||
margin: 1rem
|
||||
|
||||
.choices
|
||||
list-style-type: none
|
||||
text-align: left
|
||||
display: inline-block
|
||||
padding-left: 0
|
||||
|
||||
input[type=radio]
|
||||
display: none
|
||||
|
||||
& + label
|
||||
position: relative
|
||||
padding-left: 2rem
|
||||
& + label::before,
|
||||
& + label::after
|
||||
display: block
|
||||
position: absolute
|
||||
box-sizing: border-box
|
||||
content:''
|
||||
border-radius: 1rem
|
||||
& + label::before
|
||||
bottom: 0
|
||||
left: 0
|
||||
background-color: var(--color-green)
|
||||
width: 1rem
|
||||
height: 1rem
|
||||
& + label::after
|
||||
bottom: 3px
|
||||
left: 3px
|
||||
width: calc(1rem - 6px)
|
||||
height: calc(1rem - 6px)
|
||||
&:checked + label::before
|
||||
background-color: white
|
||||
&:checked + label::after
|
||||
background-color: var(--color-green)
|
||||
input[type=radio]
|
||||
margin-right: .5rem
|
||||
|
||||
.main
|
||||
height: 100%
|
||||
|
|
@ -149,19 +87,11 @@ legend
|
|||
justify-content: space-around
|
||||
align-items: center
|
||||
|
||||
.center
|
||||
width: 100%
|
||||
text-align: center
|
||||
|
||||
.images
|
||||
margin: 3rem auto
|
||||
.bottom
|
||||
width: 400px
|
||||
max-width: 100%
|
||||
min-width: 280px
|
||||
|
||||
h2
|
||||
font-size: 2rem
|
||||
|
||||
.answers
|
||||
text-align: center
|
||||
|
||||
|
|
@ -169,6 +99,6 @@ legend
|
|||
.main
|
||||
flex-direction: row
|
||||
|
||||
.images
|
||||
.bottom
|
||||
max-width: 50%
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -105,10 +105,7 @@ function answerSelected(question, answerWeight) {
|
|||
}
|
||||
|
||||
function nextQuestion() {
|
||||
setTimeout(() => {
|
||||
slides.value.go(">");
|
||||
console.log(slides)
|
||||
}, 100);
|
||||
setTimeout(() => slides.value.go(">"), 100);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -137,8 +134,13 @@ function nextQuestion() {
|
|||
</SplideSlide>
|
||||
<SplideSlide class="latest">
|
||||
<template v-if="displayScoreResult && result">
|
||||
<h2 class="center">Probabilité d'échec</h2>
|
||||
<h2 class="center">{{ result.pde_qtra }}</h2>
|
||||
<ul>
|
||||
<li>score : {{ scoreSum }}</li>
|
||||
<li>pde : {{ result.pde }}</li>
|
||||
<li>pde_qtra : {{ result.pde_qtra }}</li>
|
||||
<li>effets : {{ result.effets }}</li>
|
||||
<li>facteur : {{ result.facteur }}</li>
|
||||
</ul>
|
||||
<div class="gradient">
|
||||
<div
|
||||
v-for="(item, index) in [...Array(7).keys()]"
|
||||
|
|
@ -148,14 +150,6 @@ function nextQuestion() {
|
|||
{{ index + 1 }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="details">
|
||||
<p>Rappel des paramètres choisis :</p>
|
||||
<ul>
|
||||
<li v-for="question in questions" :key="question.id">
|
||||
{{ question.title }} : {{ question.answers.find((answer) => answer.weight === question.weight).title }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="noscore">
|
||||
|
|
@ -187,8 +181,6 @@ function nextQuestion() {
|
|||
</template>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.center
|
||||
text-align: center
|
||||
.noscore
|
||||
display: flex
|
||||
justify-content: center
|
||||
|
|
@ -213,8 +205,7 @@ function nextQuestion() {
|
|||
|
||||
|
||||
.splide__slide
|
||||
background: white
|
||||
color: black
|
||||
background: transparent
|
||||
position: relative
|
||||
padding: 1rem
|
||||
|
||||
|
|
@ -232,64 +223,40 @@ label
|
|||
|
||||
.latest
|
||||
background-color: var(--color-green)
|
||||
color: var(--color-white)
|
||||
text-align: center
|
||||
|
||||
h2
|
||||
font-size: 2rem
|
||||
& + h2
|
||||
line-height: 2rem
|
||||
font-size: 2.6rem
|
||||
|
||||
ul
|
||||
text-align: left
|
||||
|
||||
.details
|
||||
text-align: left
|
||||
display: inline-block
|
||||
font-size: 1.1rem
|
||||
color: var(--color-black)
|
||||
|
||||
.gradient
|
||||
width: calc(100% - 2rem)
|
||||
padding: 0 1rem
|
||||
height: 3rem
|
||||
background-image: linear-gradient(to right, red, red, rgb(255, 255, 0), rgb(255, 255, 0), green, green)
|
||||
display: flex
|
||||
margin: 2.5rem auto
|
||||
margin: 2.5rem 0
|
||||
align-items: center
|
||||
border-radius: 3px
|
||||
max-width: 30rem
|
||||
color: var(--color-black)
|
||||
position: absolute
|
||||
bottom: 0
|
||||
|
||||
div
|
||||
width: calc(100%/7)
|
||||
text-align: center
|
||||
align-self: center
|
||||
font-weight: bold
|
||||
|
||||
.active
|
||||
border: 1px solid black
|
||||
border-radius: 3px
|
||||
height: 200%
|
||||
font-weight: bold
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
position: relative
|
||||
|
||||
&:before
|
||||
content: ""
|
||||
border: 1px solid black
|
||||
border-radius: 3px
|
||||
top: -2.8rem
|
||||
bottom: -1.5rem
|
||||
&::before
|
||||
content: "PdE\AQTRA"
|
||||
position: absolute
|
||||
width: 100%
|
||||
font-weight: bold
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
|
||||
&::after
|
||||
content: "PdE"
|
||||
position: absolute
|
||||
font-size: 1rem
|
||||
top: -2rem
|
||||
bottom: -1.5rem
|
||||
left: 0
|
||||
right: 0
|
||||
font-size: .5rem
|
||||
top: 0
|
||||
line-height: .7rem
|
||||
|
||||
.splide__arrows
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ function getTranslation(translations, key) {
|
|||
🌞
|
||||
</li>
|
||||
</ul>
|
||||
<h1>Scores Ceiba</h1>
|
||||
<h1>Ceiba Scores App</h1>
|
||||
<ul>
|
||||
<li v-if="store.language == 'fr-FR'" @click="store.switchLanguage">🇫🇷</li>
|
||||
<li v-if="store.language == 'en-US'" @click="store.switchLanguage">🇺🇸</li>
|
||||
|
|
@ -75,7 +75,6 @@ header
|
|||
|
||||
h1
|
||||
text-align: center
|
||||
text-transform: uppercase
|
||||
|
||||
ul
|
||||
margin: 0
|
||||
|
|
|
|||
Loading…
Reference in New Issue