Pushkin
Search…
Getting Started
Advanced
Home Page
Add a Quiz
To add a quiz, run
pushkin install experiment. Select the experiment template of choice (see this list for the options). This will create a pushkin experiment template in the experiments/ folder.Open the
config.js located in your experiment folder, modify the experiment name, shortName, logo, text etc.1
experimentName: &fullName 'mind Experiment'
2
shortName: &shortName 'mind' # This should be unique as its used for urls, etc.
3
apiControllers: # The default export from each of these locations will be attached to a pushkin API
4
- mountPath: *shortName
5
location: 'api controllers'
6
name: 'mycontroller'
7
worker:
8
location: 'worker'
9
service: # what to add as a service in main compose file
10
image: *shortName
11
links:
12
- message-queue
13
- test_db
14
environment:
15
- "AMQP_ADDRESS=amqp://message-queue:5672"
16
- "DB_USER=postgres"
17
- "DB_PASS="
18
- "DB_URL=test_db"
19
- "DB_NAME=test_db"
20
webPage:
21
location: 'web page'
22
migrations:
23
location: 'migrations'
24
seeds:
25
location: ''
26
# Used for migration and seed commands via main CLI
27
# Note that these might be different than those given to the worker,
28
# Since it's running inside a linked docker container
29
database: 'localtestdb'
30
logo: 'Mind.png'
31
text: 'Enter your experiment description here'
32
tagline: 'Be a citizen scientist! Try this quiz.'
33
duration: ''
Copied!
After running
pushkin prep, the experiments.js located in pushkin/front-end/src will be updated, it should be an array of objects like this:1
export default [
2
{ fullName: 'vocab Experiment', shortName: 'vocab', module: pushkinComponent7e170301859545dab691a08652b798a8, logo: 'logo512.png', tagline: 'Be a citizen scientist! Try this quiz.', duration: '' },
3
{ fullName: 'mind Experiment', shortName: 'mind', module: pushkinComponent1d77ca65c9f94dac834629611d452c8e, logo: 'logo512.png', tagline: 'Be a citizen scientist! Try this quiz.', duration: '' },
4
{ fullName: 'whichenglish Experiment', shortName: 'whichenglish', module: pushkinComponentbbca5356917345c2b2532e84e5325197, logo: 'logo512.png', tagline: 'Be a citizen scientist! Try this quiz.', duration: '' },
5
];
Copied!
Then the new quiz card will be automatically added to the home page.
Jumbotron
The Jumbotron is a lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.
1
<Jumbotron style={{backgroundColor:'#eeeeee'}}>
2
<div>
3
We do <strong>citizen science</strong> to learn how the mind
4
works.{' '}
5
</div>
6
<div>
7
<strong>
8
Pick a game to get started!
9
</strong>
10
</div>
11
<div className="mt-3">
12
Feel free to send us feedback <LinkContainer to="/feedback"><a><strong>HERE</strong></a></LinkContainer>
13
</div>
14
</Jumbotron>
Copied!
It includes a link to the feedback page, an archor tag wrapped in
<LinkContainer> component.CardDeck
The
<CardDeck> creates a grid of cards that are of equal height and width. The layout will automatically adjust as you insert more cards. We recommend putting every 3 cards in a card deck. Quizzes are wrapped in card decks in Home.js located in pushkin/front-end/src/pages.Card
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options:
<Card.Body>to pad content inside a<Card>.<Card.Title>,<Card.Subtitle>, and<Card.Text>inside the<Card.Body>will line them up nicely.<Card.Link>are used to line up links next to each other.:hoverStyles.circleStyleclassName in the<LinkContainer. If you would like to use square or rectangular images, be sure to not include this className.
For example, the quiz card in the home page:
1
<Card className="border-0 shadow" style={styles.card}>
2
<Card.Body>
3
<LinkContainer
4
// style={styles.cardButton}
5
to={'/quizzes/' + this.props.id}
6
className={css(hoverStyles.opacityStyle, hoverStyles.circleStyle)}
7
>
8
<Card.Img src={this.props.img} style={styles.cardImage} />
9
</LinkContainer>
10
<Card.Title className="mt-4" style={styles.cardTitle}>
11
{this.props.title}
12
</Card.Title>
13
<Card.Text className="mt-4" style={styles.cardText}>
14
{this.props.text}
15
16
{/* {this.props.duration && (
17
<p>
18
{' '}
19
<strong>
20
{' '}
21
Average time: {this.props.duration} minutes.{' '}
22
</strong>{' '}
23
</p>
24
)}
25
26
{this.state.count && (
27
<p> {this.state.count} players so far! </p>
28
)} */}
29
</Card.Text>
30
</Card.Body>
31
<Row className="justify-content-center mt-2">
32
<LinkContainer
33
// style={styles.cardButton}
34
to={'/quizzes/' + this.props.id}
35
>
36
<Button className={css(hoverStyles.cardButton)}>Play Now</Button>
37
</LinkContainer>
38
</Row>
39
<Row className="justify-content-center mt-3 mb-3">
40
<i.SocialIcon
41
url={share.facebook}
42
onClick={e => {
43
e.preventDefault();
44
share.open(share.facebook);
45
}}
46
className={css(hoverStyles.socialIcon, hoverStyles.opacityStyle)}
47
target="_blank"
48
/>
49
<i.SocialIcon
50
url={share.twitter}
51
onClick={e => {
52
e.preventDefault();
53
share.open(share.twitter);
54
}}
55
className={css(hoverStyles.socialIcon, hoverStyles.opacityStyle)}
56
target="_blank"
57
/>
58
<i.SocialIcon
59
url={share.email}
60
className={css(hoverStyles.socialIcon, hoverStyles.opacityStyle)}
61
target="_blank"
62
/>
63
{/* BETA ribbon */}
64
{/* {this.props.beta && (
65
<LinkContainer to={'/quizzes/' + this.props.id}>
66
<div className={s.ribbon + ' ' + s.ribbonBottomLeft}>
67
{' '}
68
<span>BETA</span>{' '}
69
</div>
70
</LinkContainer>
71
)} */}
72
</Row>
73
</Card>
Copied!
The components inside a quiz card, in order from top to bottom, are:
<Card.Img>: Quiz cover image<Card.Title>: Quiz name<Card.Text>: Quiz description<Button>: Wrapped in<LinkContainer>
Last modified 1yr ago
Copy link