-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
149 lines (113 loc) · 8.74 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title id='counter-title'>pomodoro</title>
<!-- Our CSS style sheet -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Epilogue:wght@500&display=swap" rel="stylesheet">
<!-- <link rel="stylesheet" href="assets/css/style.css"> -->
<!-- <script async src="https://www.googletagmanager.com/gtag/js?id=UA-133442962-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-133442962-1');
</script> -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class='col-md-2'></div>
<div class="col-md-8 mainContent custom top" >
<h1 id='title'>pomodoro</h1>
<p class='encouragement'>click start to begin</p>
</div>
<div class='col-md-2'></div>
</div>
<div class="row">
<div class='col-md-2'></div>
<div class='col-md-8 custom'>
<h2 class="timer">time left</h2>
<h2 class="timer" id='counter'>25:00</h2>
</div>
<div class='col-md-2'></div>
</div>
<div class="row">
<div class='col-md-2'></div>
<div class='col-md-8 custom'>
<button type="button" class="btn btn-default" id="start">Start</button>
<button type="button" class="btn btn-basic" id="stop">Stop</button>
<div class='col-md-2'></div>
</div>
</div>
<div class="row">
<div class='col-md-2'></div>
<div class='col-md-8 custom'>
<button type="button" class="btn btn-default" id="info">Info</button>
<div class='col-md-2'></div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Final Project</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h1>Project Purpose</h1>
<p>This is my final project for the Coursera course <a href='https://www.coursera.org/learn/learning-how-to-learn' target="_blank">Learning How to Learn: Powerful mental tools to help you master tough subjects </a></p>
<p>I chose to use the medium of an online app to share what I learned. I built a Pomodoro app out of HTML, CSS, and Javascript. The repo can be found my <a href='https://github.com/EpicureanHeron/pomodoro' target="_blank">Github</a>.
</p>
<P>This Pomodoro app facilitates three goals. Those three goals are topics covered in the Coursera course. They are overcoming procrastination, encouraging focused and diffuse learning, and engaging in deliberate practice. </P>
<h2>Pomodoro Techinique</h2>
<p>The Pomodoro Techinique was created by <a href='https://francescocirillo.com/pages/pomodoro-technique' target="_blank">Frances Cocirillo</a>. It helps overcome procrastination and encourage learning link</a> This is done by setting a timer for 25 minutes. During that time period, the learner sets aside all distractions and focuses intently on the subject they are studying. After a 25 minute is complete, the subject then is rewarded by a 5 minute break where they allow their mind to wander, treat themselves to playing on their smartphone, or some other reward. Then a 25 minute period is started and the 5 minute rest period is followed.
</p>
<h2>Topic 1: Procrastination</h2>
<p>Procrastination is the habit of delaying work on a task because there is a negative association with the work. This habit often prioritizes the comfort and instant reward of a more pleasant task over the task that is perceived as negative. The Pomodoro Technique helps break through procrastination. The neurodiscomfort associated with the task often disappears after only a few minutes of actively working on the task.</p>
<p>Using this Pomodoro app as a mechanism to jump start the work is very effective as a cue to begin a new habit. Also, the timeboxed nature of the Pomodoro app helps break the work up into easier sessions, favoring the process over the product in the learner's mind. A larger task can be broken into smaller sessions, setting the goal as working through the 25 minute session rather than focusing on the end result of the product.
</p>>
<h2>Topic 2: Focused and Diffuse Learning </h2>
<p>The mind has two methods of learning, focus and diffuse. The focus mode relates to the neural pathways which are actively being engaged and built. This is the “nose-to-the-grindstone” mentality. In this mode, distractions are ignored and the task at hand is the only thing that matters.
</p>
<p> This Pomodoro app encourages a 25 minute period of focused learning. After which, there is a 5 minute period which acts a reward. It also encourages diffuse learning. Diffuse learning happens when the mind is let loose to wander on its own. The brain is allowed to try out different and new, further reaching pathways. This helps build creative thoughts and new </p>
<h2>Topic 3: Deliberate Practice</h2>
<p>Deliberate practice is a type of focused learning that has a very specific goal and scope. These boundaries make it different than repetitive practice, rather it encourages the engagement of the mind and helps build chunks. The Pomodoro app assists with deliberate practice as it encourages this high level of timeboxed engagement. </p>
<p>The specific goal can be broken across several Pomodoro sessions, favoring the process over the product itself, further encouraging effective learning.
</p>
<h2>References</h2>
<ul>
<li>Boice, Robert. Procrastination and Blocking. Westport, CT: Praeger, 1996
</li>
<li>Duhigg, Charles. The Power of Habit. NY: Random House, 2012.
</li>
<li>Takeuchi, H. Y. Taki, H. Hashizume, Y. Sassa, T. Nagase, R. Nouchi, and R. Kawashim. “The Association between Resting Functional Connectivity and Creativity.” Cerebral Cortex 22, no. 12 (Jan 10 2012): 2921-29.
</li>
<li>Brent, Rebecca, and Richard M. Felder. “Learning by Solving Solved Problems.” Chemical Engineering Education 46, no. 1 (2012): 29-30
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
</div>
</div>
</div>
</div>
</div>
</body>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.12.0/moment.min.js"></script>
<!-- Script -->
<script type="text/javascript" src="app.js"></script>
</html>