/bigfive-web

Permalink
Browse files

images du futur

  • Loading branch information...
1 parent 3dcb9d9 commit 89004e1328ba2e3c57e184f635e5e929342f3033 maccyber committed Mar 29, 2017
View
1 .travis.yml
@@ -3,4 +3,3 @@ node_js:
- "7"
after_success:
- npm run coveralls
- - test $TRAVIS_BRANCH = "master" && npm i -g now && now -t=$NOW_TOKEN && now -t=$NOW_TOKEN alias
View
11 components/info/countries.js
@@ -6,15 +6,22 @@ export default ({ handleChange, country }) => (
<p className='question'>
Nationality
</p>
- <select name='country' className='countries' onChange={handleChange}>
- {countries.getData().map(c => <option key={c.code} value={c.code}>{c.name}</option>)}
+ <select name='country' className='countries' value={country} onChange={handleChange}>
+ {
+ countries.getData().map(c =>
+ <option key={c.code} value={c.code}>
+ {c.name}
+ </option>
+ )
+ }
</select>
<style>
{`
.countries {
font-size: 24px;
background-color: #fff;
color: #828282;
+ width: 200px;
}
`}
</style>
View
4 components/info/gender.js
@@ -6,8 +6,8 @@ export default ({ handleChange, gender }) => (
Gender
</p>
<span className='choiseBox' name='gender' value={gender} onClick={handleChange}>
- <i name='gender' className='material-icons checked-male' value='Male'>{gender === 'Male' ? 'radio_button_checked' : 'radio_button_unchecked'}</i> Male
- <i name='gender' className='material-icons checked-female' value='Female'>{gender === 'Female' ? 'radio_button_checked' : 'radio_button_unchecked'}</i> Female
+ <i name='gender' className='material-icons checked-male' value='Male'>{gender === 'Male' ? 'radio_button_checked' : 'radio_button_unchecked'}</i> <label name='gender' value='Male'>Male</label>
+ <i name='gender' className='material-icons checked-female' value='Female'>{gender === 'Female' ? 'radio_button_checked' : 'radio_button_unchecked'}</i> <label name='gender' value='Female'>Female</label>
</span>
<style>
{`
View
4 components/info/index.js
@@ -1,12 +1,14 @@
import React from 'react'
+import Tests from './tests'
import TestInfo from './test-info'
import Age from './age'
import Gender from './gender'
import Countries from './countries'
-export default ({ gender, age, country, handleChange, buttonSubmitDisabled, buttonSubmit, hideMain, loading }) => (
+export default ({ gender, age, country, handleChange, buttonSubmitDisabled, buttonSubmit, hideMain, loading, switchTest, selectedTest }) => (
<div style={{ display: hideMain && !loading ? 'block' : 'none' }}>
<TestInfo />
+ <Tests switchTest={switchTest} selectedTest={selectedTest} />
<Age handleChange={handleChange} age={age} />
<Gender handleChange={handleChange} gender={gender} />
<Countries handleChange={handleChange} country={country} />
View
78 components/info/tests.js
@@ -0,0 +1,78 @@
+import React from 'react'
+
+const tests = [
+ {
+ id: '120',
+ text: "(Recommended) 120 questions (Johnson's IPIP NEO-PI-R)",
+ active: true
+ },
+ {
+ id: '100',
+ text: "Costa and McCrae's NEO-PI-R (100 questions)",
+ active: true
+ },
+ {
+ id: '50',
+ text: "Costa and McCrae's NEO-PI-R (50 questions)",
+ active: true
+ },
+ {
+ id: '20',
+ text: 'Mini-IPIP 5-factors (20 questions)',
+ active: true
+ },
+ {
+ id: 'hexaco',
+ text: "Lee and Ashton's HEXACO-PI (240 questions) (EXPERIMENTAL)",
+ active: false
+ }
+]
+
+export default ({ switchTest, selectedTest }) => (
+ <span>
+ <p className='question'>
+ Choose test:
+ </p>
+ {
+ tests.map(t =>
+ <span
+ key={t.id}
+ id={t.id}
+ onClick={switchTest}
+ className={
+ selectedTest === t.id ? 'testSelected' : t.active ? 'tests' : 'tests testInactive'
+ }
+ >
+ {t.text}
+ <br />
+ </span>
+ )
+ }
+ <style>
+ {`
+ .tests {
+ padding: 5px;
+ cursor: pointer;
+ margin-left: 4px;
+ line-height: 30px;
+ }
+ .testInactive {
+ color: #b1b1b1;
+ font-style: italic;
+ cursor: not-allowed;
+ }
+ .testSelected {
+ font-weight: bold;
+ padding: 2px;
+ cursor: pointer;
+ margin-left: 4px;
+ line-height: 30px;
+ border-radius: 10px;
+ padding: 5px;
+ background-color: #e6e6e6;
+ }
+
+ `}
+ </style>
+ </span>
+)
View
21 components/loading.js
@@ -4,21 +4,20 @@ export default ({ loading }) => (
<div>
{
loading
- ?
- <span className='loading'>
- <p>
- <img src='static/loading.svg' style={{width: 100}} />
- </p>
- <p>
- <big>LOADING ...</big></p>
- <style>
- {`
+ ? <span className='loading'>
+ <p>
+ <img src='static/loading.svg' style={{width: 100}} />
+ </p>
+ <p>
+ <big>LOADING ...</big></p>
+ <style>
+ {`
.loading {
text-align: center;
}
`}
- </style>
- </span>
+ </style>
+ </span>
: null
}
</div>
View
3 components/progressbar.js
@@ -20,7 +20,8 @@ export default ({ progress }) => (
.bar {
height: 20px;
background-color: #94d696;
- }
+ transition: width 2s;
+ }
`}
</style>
</div>
View
37 components/results/index.js
@@ -76,7 +76,7 @@ export default class Results extends React.Component {
</span>
</p>
<p><span dangerouslySetInnerHTML={{__html: d.text}} /> </p>
- <p>Your level of <i>{d.title.toLowerCase()}</i> is <b>{d.scoreText}</b></p>
+ <p>Your level of <i>{d.title.toLowerCase()}</i> is <b>{d.scoreText} ({d.score}/{d.count * 5})</b></p>
<div style={{ display: d.facets.length > 1 ? 'block' : 'none' }} >
<BarChart
data={[{values: Object.assign(d.facets.map(s => ({x: `${s.title} (${s.score})`, y: s.score})))}]}
@@ -90,7 +90,7 @@ export default class Results extends React.Component {
<span key={f.title}>
<p className='title2'>{f.title}</p>
<p><span dangerouslySetInnerHTML={{__html: f.text}} /></p>
- <p>Your level of <i>{f.title.toLowerCase()}</i> is <b>{f.scoreText}</b></p>
+ <p>Your level of <i>{f.title.toLowerCase()}</i> is <b>{f.scoreText} ({f.score}/{f.count * 6})</b></p>
</span>
)
}
@@ -103,7 +103,26 @@ export default class Results extends React.Component {
font-size: 23px;
margin-bottom: 10px;
}
- @media (max-width:1300px) {
+ .rd3-barchart-bar:nth-child(1) {
+ fill: #ff8888;
+ }
+ .rd3-barchart-bar:nth-child(2) {
+ fill: #88d6ff;
+ }
+ .rd3-barchart-bar:nth-child(3) {
+ fill: #fff188;
+ }
+ .rd3-barchart-bar:nth-child(4) {
+ fill: #98ff88;
+ }
+ .rd3-barchart-bar:nth-child(5) {
+ fill: #ee88ff;
+ box-shadow: 7px 10px 5px 0px rgba(0,0,0,0.75);
+ }
+ .rd3-barchart-bar:nth-child(6) {
+ fill: #a988ff;
+ }
+ @media (min-width:681px) and (max-width:1300px) {
.rd3-barchart-xaxis text {
text-anchor: start;
transform: rotate(50deg);
@@ -116,6 +135,18 @@ export default class Results extends React.Component {
transform: scaleY(4);
}
}
+ @media (max-width: 680px) {
+ .rd3-barchart-xaxis text {
+ writing-mode: tb;
+ text-anchor: start;
+ }
+ .rd3-barchart-xaxis line {
+ transform: scaleY(0);
+ }
+ .rd3-chart {
+ padding-bottom: 200px;
+ }
+ }
`}
</style>
</div>
View
29 components/thetest.js
@@ -22,26 +22,30 @@ export default class TheTest extends React.Component {
languages: [],
radios: [],
lang: config.defaultLanguage,
- choosenTest: props.test || config.defaultTest,
+ choosenTest: config.defaultTest,
submitDisabled: true,
now: Date.now(),
age: '',
gender: 'Male',
- country: '',
+ country: 'GB',
buttonSubmitDisabled: true,
- hideMain: true
+ hideMain: true,
+ percent: 0
}
this.handleRadioChange = this.handleRadioChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
this.switchLanguage = this.switchLanguage.bind(this)
this.prevPage = this.prevPage.bind(this)
this.handleChange = this.handleChange.bind(this)
this.buttonSubmit = this.buttonSubmit.bind(this)
+ this.switchTest = this.switchTest.bind(this)
}
async componentDidMount () {
+ const ipCountry = await getData(`${config.ipCountryUrl}${this.props.ip}`)
+ const country = ipCountry.countryCode || 'NO'
const data = await getData(`${config.dataUrl}?lang=${this.state.lang}&testType=${this.state.choosenTest}&limit=${config.defaultLimit}`)
- this.setState({ ...data, loading: false })
+ this.setState({ ...data, loading: false, country: country })
}
async handleChange (e) {
@@ -55,18 +59,26 @@ export default class TheTest extends React.Component {
buttonSubmit (e) {
e.preventDefault()
+ window.scrollTo(0, 0)
this.setState({ hideMain: false })
}
handleRadioChange (e) {
let radioStore = this.state.radios
const selectedName = parseInt(e.currentTarget.getAttribute('name'))
+ const percent = Math.round(selectedName / parseInt(this.state.totalQuestions) * 100)
const selectedValue = parseInt(e.currentTarget.getAttribute('value'))
const {domain, facet} = this.state.questions.find(c => c.id === selectedName)
radioStore[selectedName] = {score: selectedValue, domain: domain, facet: facet}
this.setState({radios: radioStore})
const allChecked = isAllChecked(radioStore, this.state.from, this.state.to)
- this.setState({submitDisabled: !allChecked})
+ this.setState({submitDisabled: !allChecked, percent: percent})
+ }
+
+ async switchTest (e) {
+ const selectedTest = e.target.getAttribute('id')
+ const data = await getData(`${config.dataUrl}?page=1&lang=en&testType=${selectedTest}&limit=${config.defaultLimit}`)
+ this.setState({ ...data, lang: 'en', choosenTest: selectedTest })
}
async switchLanguage (e) {
@@ -86,7 +98,8 @@ export default class TheTest extends React.Component {
e.preventDefault()
if (this.state.next) {
const data = await getData(`${this.state.next}&lang=${this.state.lang}&testType=${this.state.choosenTest}&limit=${config.defaultLimit}`)
- this.setState({ ...data, submitDisabled: true })
+ const allChecked = isAllChecked(this.state.radios, data.from, data.to)
+ this.setState({ ...data, submitDisabled: !allChecked })
window.scrollTo(0, 0) // Scrolls to top of page
} else {
this.setState({ submitDisabled: true, loading: true, hideMain: true })
@@ -116,14 +129,14 @@ export default class TheTest extends React.Component {
return (
<div>
<Loading loading={this.state.loading} />
- <PersonInfo age={this.state.age} gender={this.state.gender} buttonSubmitDisabled={this.state.buttonSubmitDisabled} handleChange={this.handleChange} buttonSubmit={this.buttonSubmit} hideMain={this.state.hideMain} loading={this.state.loading} />
+ <PersonInfo age={this.state.age} gender={this.state.gender} buttonSubmitDisabled={this.state.buttonSubmitDisabled} handleChange={this.handleChange} buttonSubmit={this.buttonSubmit} hideMain={this.state.hideMain} loading={this.state.loading} country={this.state.country} switchTest={this.switchTest} selectedTest={this.state.choosenTest} />
<div id='main' style={{display: this.state.hideMain ? 'none' : 'block'}} >
<form onSubmit={this.handleSubmit}>
<div>
<TimerExample start={this.state.now} />
<Languagebar switchLanguage={this.switchLanguage} selectedLanguage={this.state.lang} languages={this.state.languages} />
</div>
- <Progressbar progress={this.state.percentDone} />
+ <Progressbar progress={this.state.percent} />
{
this.state.questions.map(q =>
<Questions key={'Q' + q.id} {...q} radioSelected={this.state.radios} handleRadioChange={this.handleRadioChange} />
View
3 config/index.js
@@ -5,5 +5,6 @@ module.exports = {
generatorUrl: process.env.GENERATOR_URL || 'https://generator.bigfive.maccyber.io',
defaultLanguage: process.env.DEFAULT_LANG || 'en',
defaultLimit: parseInt(process.env.DEFAULT_LIMIT) || 5,
- defaultTest: process.env.DEFAULT_TEST || 120
+ defaultTest: process.env.DEFAULT_TEST || '120',
+ ipCountryUrl: process.env.IP_COUNTRY_URL || 'https://api.ip2country.info/ip?'
}
View
12 layouts/index.js
@@ -1,14 +1,18 @@
import React from 'react'
import Head from 'next/head'
-export default ({pageTitle, children}) => (
+export default ({pageTitle, isIE11, children}) => (
<div>
<Head>
<meta charSet='utf-8' />
<meta name='viewport' content='width=device-width,initial-scale=1' />
<link href='https://fonts.googleapis.com/css?family=Oswald|Rubik:300' rel='stylesheet' />
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet' />
<title>{pageTitle}</title>
+ <script src='static/ga.js' />
+ {isIE11 ? (
+ <script src='https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.0.5/es6-promise.auto.js' />
+ ) : null}
<link rel='apple-touch-icon' sizes='152x152' href='static/apple-touch-icon.png' />
<link rel='icon' type='image/png' href='static/favicon-32x32.png' sizes='32x32' />
<link rel='icon' type='image/png' href='static/favicon-16x16.png' sizes='16x16' />
@@ -27,10 +31,14 @@ export default ({pageTitle, children}) => (
.choiseBox {
display: block;
}
+ .footer {
+ width: 90% !important;
+ }
}
.footer {
position: absolute;
padding-top: 20px;
+ padding-bottom: 10px;
color: #828282;
width: 85%;
text-align: center;
@@ -123,7 +131,7 @@ export default ({pageTitle, children}) => (
</div>
</div>
<div className='footer'>
- <a href='https://github.com/maccyber/bigfive-web'>Bigfive-web</a><br/>
+ <a href='https://github.com/maccyber/bigfive-web'>Bigfive-web</a> - We need <a href='https://github.com/maccyber/bigfive-web'>help</a> with translations<br />
Made with ❤ by <a href='https://github.com/zrrrzzt/'>zrrrzzt</a> and <a href='https://github.com/maccyber'>maccyber</a>
</div>
</div>
Oops, something went wrong.

0 comments on commit 89004e1

Please sign in to comment.