Skip to content

Commit cf541e7

Browse files
committed
About/How To information added
1 parent 1b65f5a commit cf541e7

File tree

2 files changed

+82
-38
lines changed

2 files changed

+82
-38
lines changed

README.md

+27-12
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,42 @@
1-
# [Start Bootstrap](http://startbootstrap.com/) - [Bare](http://startbootstrap.com/template-overviews/bare/)
1+
# Dual N-Back Training
22

3-
[Bare](http://startbootstrap.com/template-overviews/bare/) is a bare HTML starter template for [Bootstrap](http://getbootstrap.com/) created by [Start Bootstrap](http://startbootstrap.com/). This template features predefined file paths for Bootstrap and jQuery, so you can quickly create Bootstrap websites.
3+
Dual N-Back training is an application that may, with daily training, improve a person's intelligence.
44

5-
## Getting Started
5+
This application is a replica of the Dual N-Back application that was used in Jaeggi, S., Buschkuehl, M., Jonides, J. and Perrig, W. (2008). Improving fluid intelligence with training on working memory. *Proceedings of the National Academy of Sciences of the United States of America*, 105(19), pp. 6829-6833. Further information available [on the original site](http://www.soakyourhead.com/Research.aspx), and [in the research paper](http://www.pnas.org/content/105/19/6829.abstract).
66

7-
To begin using this template, choose one of the following options to get started:
8-
* [Download the latest release on Start Bootstrap](http://startbootstrap.com/template-overviews/bare/)
9-
* Clone the repo: `git clone https://github.com/BlackrockDigital/startbootstrap-bare.git`
10-
* Fork the repo
7+
The application is a JavaScript conversion of the [original Silverlight version](http://www.soakyourhead.com/dual-n-back.aspx). As support for Silverlight diminishes in most modern browsers, this conversion will hopefully help users continue to use Dual N-Back training.
8+
9+
## How to Play
10+
11+
When you press the Start button, the application will begin by showing you a box and playing an audio recording of a letter. Remember where the box appeared and also remember the letter. After a few seconds, another box appears and another letter is played. Remember these, too. When you start the game, it will start at the 2-back level (displayed across the top). This means that you need to remember if a letter was repeated or a box appeared in the same location 2 times ago. For example:
12+
1. Top-right corner, letter 'F'.
13+
2. Bottom-right corner, letter 'G'.
14+
3. Top-right corner, letter 'S'.
15+
4. Bottom-middle, letter 'G'.
16+
17+
For the first 2 'blocks' you don't need to do anything because you are at the 2-back level (this obviously increases as you go up the levels). But when the third block is presented you need to decide if it matches the position or the letter (or both) of block 1. Likewise, for block 4, does it match either the position, letter, or both, of block 2, etc. etc. Press the letter 'a' on the keyboard if the position matches, 'l' if the letter matches, or both if they both match.
18+
19+
So, from the example above, when block 3 is presented, the position matches block 1 (top-right corner), but the letters do not. So, press 'a'. For block 4, the position doesn't match block 2, but the letter does, so press 'l'. Remember blocks 3 and 4 to carry on. Each session has 20 blocks. At the end of the session, if you have performed well, the level will increase to 3. So, you need to remember whenever the letter/square matches what was said/displayed 3 times ago. The level can increase or decrease depending on your performance. An entire training run consists of 20 sessions. Finish the entire run to see your results, which you can optionally save by toggling the save progress switch.
20+
21+
Be aware that this is a difficult game. At first, it will be difficult to press the correct keys. Be assured that this was the same for the research subjects when they first started. However, after enough practice, the subjects improved.
22+
23+
For more information see the [demo on the original site](http://www.soakyourhead.com/dual-n-back.aspx). Note this requires Silverlight. I will be porting the demo to a native web application in due course.
1124

1225
## Bugs and Issues
1326

14-
Have a bug or an issue with this template? [Open a new issue](https://github.com/BlackrockDigital/startbootstrap-bare/issues) here on GitHub or leave a comment on the [template overview page at Start Bootstrap](http://startbootstrap.com/template-overviews/bare/).
27+
Have a bug or an issue? [Open a new issue](https://github.com/Poc275/NBack/issues) here on GitHub.
28+
29+
## References
1530

16-
## Creator
31+
The original source code is available [here](http://www.soakyourhead.com/dual-n-back-open-source.aspx).
1732

18-
Start Bootstrap was created by and is maintained by **[David Miller](http://davidmiller.io/)**, Owner of [Blackrock Digital](http://blackrockdigital.io/).
33+
Uses Start Bootstrap which was created by and maintained by **[David Miller](http://davidmiller.io/)**, Owner of [Blackrock Digital](http://blackrockdigital.io/).
1934

2035
* https://twitter.com/davidmillerskt
2136
* https://github.com/davidtmiller
2237

2338
Start Bootstrap is based on the [Bootstrap](http://getbootstrap.com/) framework created by [Mark Otto](https://twitter.com/mdo) and [Jacob Thorton](https://twitter.com/fat).
2439

25-
## Copyright and License
40+
Uses [Bootstrap Toggle](http://www.bootstraptoggle.com/) for the toggle switch.
2641

27-
Copyright 2013-2016 Blackrock Digital LLC. Code released under the [MIT](https://github.com/BlackrockDigital/startbootstrap-bare/blob/gh-pages/LICENSE) license.
42+
[QUnit](https://qunitjs.com/) used for the tests.

index.html

+55-26
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
<meta charset="utf-8">
77
<meta http-equiv="X-UA-Compatible" content="IE=edge">
88
<meta name="viewport" content="width=device-width, initial-scale=1">
9-
<meta name="description" content="">
10-
<meta name="author" content="">
9+
<meta name="description" content="Dual N-Back training for memory and intelligence">
1110

1211
<title>Dual N-Back Training</title>
1312

@@ -54,11 +53,14 @@
5453
<!-- Collect the nav links, forms, and other content for toggling -->
5554
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
5655
<ul class="nav navbar-nav navbar-right">
56+
<li>
57+
<a href="#" data-toggle="modal" data-target="#howToPlayModal">How To Play</a>
58+
</li>
5759
<li>
5860
<a id="progress-link" href="#">Your Progress</a>
5961
</li>
6062
<li>
61-
<a href="#" data-toggle="modal" data-target="#aboutModal">What is this&quest;</a>
63+
<a href="#" data-toggle="modal" data-target="#aboutModal">About</a>
6264
</li>
6365
</ul>
6466
</div> <!-- /.navbar-collapse -->
@@ -210,6 +212,47 @@ <h4 class="modal-title" id="myModalLabel">Progress History</h4>
210212
</div>
211213

212214

215+
<!-- how to play modal dialog -->
216+
<div class="modal fade" id="howToPlayModal" tabindex="-1" role="dialog" aria-labelledby="howToPlayModalLabel">
217+
<div class="modal-dialog" role="document">
218+
<div class="modal-content">
219+
<div class="modal-header">
220+
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
221+
<h4 class="modal-title" id="myModalLabel">How to Play</h4>
222+
</div>
223+
<div class="modal-body">
224+
<p>When you press the Start button, the application will begin by showing you a box and playing an audio recording of a letter. Remember where the box
225+
appeared and also remember the letter. After a few seconds, another box appears and another letter is played. Remember these, too. When you start the game,
226+
it will start at the 2-back level (displayed across the top). This means that you need to remember if a letter was repeated or a box appeared in the same
227+
location 2 times ago. For example:
228+
<ol>
229+
<li>Top-right corner, letter 'F'.</li>
230+
<li>Bottom-right corner, letter 'G'.</li>
231+
<li>Top-right corner, letter 'S'.</li>
232+
<li>Bottom-middle, letter 'G'.</li>
233+
</ol>
234+
For the first 2 'blocks' you don't need to do anything because you are at the 2-back level (this obviously increases as you go up the levels). But when the
235+
third block is presented you need to decide if it matches the position or the letter (or both) of block 1. Likewise, for block 4, does it match either the position, letter,
236+
or both, of block 2, etc. etc. Press the letter 'a' on the keyboard if the position matches, 'l' if the letter matches, or both if they both match.
237+
</p>
238+
<p>So, from the example above, when block 3 is presented, the position matches block 1 (top-right corner), but the letters do not. So, press 'a'. For block 4, the
239+
position doesn't match block 2, but the letter does, so press 'l'. Remember blocks 3 and 4 to carry on. Each session has 20 blocks. At the end of the session, if you
240+
have performed well, the level will increase to 3. So, you need to remember whenever the letter/square matches what was said/displayed 3 times ago. The level can
241+
increase or decrease depending on your performance. An entire training run consists of 20 sessions. Finish the entire run to see your results, which you can
242+
optionally save by toggling the save progress switch.
243+
</p>
244+
<p>Be aware that this is a difficult game. At first, it will be difficult to press the correct keys. Be assured that this was the same for the research subjects when
245+
they first started. However, after enough practice, the subjects improved.
246+
</p>
247+
<p>For more information see the <a href="http://www.soakyourhead.com/dual-n-back.aspx" target="_blank">demo on the original site</a>. Note this requires Silverlight.
248+
I will be porting the demo to a native web application in due course.
249+
</p>
250+
</div>
251+
</div>
252+
</div>
253+
</div>
254+
255+
213256
<!-- about modal dialog -->
214257
<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="aboutModalLabel">
215258
<div class="modal-dialog" role="document">
@@ -219,11 +262,10 @@ <h4 class="modal-title" id="myModalLabel">Progress History</h4>
219262
<h4 class="modal-title" id="myModalLabel">About</h4>
220263
</div>
221264
<div class="modal-body">
222-
<h4>Dual N-Back Training</h4>
223265
<blockquote cite="http://www.soakyourhead.com/Default.aspx">
224266
<p>Dual N-Back training is an application that may, with daily training, improve a person's intelligence.</p>
225267
<footer>
226-
<a href="http://www.soakyourhead.com/Default.aspx">
268+
<a href="http://www.soakyourhead.com/Default.aspx" target="_blank">
227269
soakyourhead.com
228270
</a>
229271
</footer>
@@ -232,28 +274,15 @@ <h4>Dual N-Back Training</h4>
232274
<p>This application is a replica of the Dual N-Back application that was used in Jaeggi, S., Buschkuehl, M., Jonides, J. and Perrig, W. (2008).
233275
Improving fluid intelligence with training on working memory. <cite>Proceedings of the National Academy of Sciences of the United States
234276
of America</cite>, 105(19), pp. 6829-6833. Further information available
235-
<a href="http://www.soakyourhead.com/Research.aspx">on the original site</a>, and
236-
<a href="http://www.pnas.org/content/105/19/6829.abstract">in the research paper</a>.</p>
237-
238-
<p>The application is a Javascript conversion of the
239-
<a href="http://www.soakyourhead.com/dual-n-back.aspx">original Silverlight version</a>
240-
(<a href="http://www.soakyourhead.com/dual-n-back-open-source.aspx">source code</a>).
241-
As support for Silverlight diminishes in most modern browsers, this conversion will hopefully help users continue to use Dual N-Back training.</p>
277+
<a href="http://www.soakyourhead.com/Research.aspx" target="_blank">on the original site</a>, and
278+
<a href="http://www.pnas.org/content/105/19/6829.abstract" target="_blank">in the research paper</a>.
279+
</p>
242280

243-
<h4>How to play</h4>
244-
<p>When you press the Start button, the application will begin by showing you a box and playing an audio recording of a letter. Remember where the box
245-
appeared and also remember the letter. After a few seconds, another box appears and another letter is played. Remember these, too. When you start the game
246-
it will start at the 2-back level (displayed across the top). This means that you need to remember if a letter was repeated or a box appeared in the same
247-
location 2 times ago. For example:
248-
<ol>
249-
<li>Top-right corner, letter 'F'.</li>
250-
<li>Bottom-right corner, letter 'G'.</li>
251-
<li>Top-right corner, letter 'S'.</li>
252-
<li>Bottom-middle, letter 'Q'.</li>
253-
</ol>
254-
For the first 2 'blocks' you don't need to do anything because you are at the 2-back level (this obviously increases as you go up the levels). But when the
255-
third block is presented you need to decide if it matches the position or the letter of block 1. Likewise for block 4, does it match either the position, letter,
256-
or both, of block 2, etc. etc. Press the letter 'a' on the keyboard if the position matches, 'l' if the letter matches, or both if they both match.
281+
<p>The application is a JavaScript conversion of the
282+
<a href="http://www.soakyourhead.com/dual-n-back.aspx" target="_blank">original Silverlight version</a>
283+
(<a href="http://www.soakyourhead.com/dual-n-back-open-source.aspx" target="_blank">source code</a>).
284+
As support for Silverlight diminishes in most modern browsers, this conversion will hopefully help users continue to use Dual N-Back training. Feel
285+
free to use the <a href="https://github.com/Poc275/NBack" target="_blank">converted source code</a> to improve the application, or to make your own version.
257286
</p>
258287
</div>
259288
</div>

0 commit comments

Comments
 (0)