playbook/index.html at main · hackthackathon/playbook · GitHub

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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
    >
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.colors.min.css"
    >
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hack The Hackathon vol. 4 - Playbook</title>
  </head>
  <body>
    <main class="container">
      <h1>Hack The Hackathon vol. 4 - Playbook</h1>
      <blockquote>
        <p>
          A collection of resources including user stories for organizers and hackers, a gantt chart timeline for academic hackathon organizers, and a set of archetypes based on time management for hackers.
        </p>
      </blockquote>

      <article>
        <h2>Organizer Timeline</h2>
        <p>This is an example of a project management timeline that was used by hackathon organizers to plan out the tasks that need to happen before, during, and after the hackathon live event. With appropriate foresight, coordination, and lots of communication, hackathons are rewarding and fun experiences for both participants and organizers.</p>
        <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto;">
          <iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vTBUI3nPpxhUiI6mpCh-0OH0UrSSjlOt0bF5_4MG_Lb8TMbSeN8uK9i4m-vMyf9K7jCb8SQvunaB_QY/pubhtml?gid=108104989&amp;single=true&amp;widget=true&amp;headers=false" frameborder="0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
        </div></div>
        <a href="Fake Hackathon Timeline - Timeline 2.pdf" download="sample-timeline">Download sample timeline</a>
      </article>

      <article>
        <h2>User Stories</h2>
        <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto;">
          <iframe src="https://docs.google.com/presentation/d/e/2PACX-1vRdZ24EMEA3zEKPgVzVcCvG2IYGP6tsCF56duK0-feNKFY6VCdY96nXJSaRPYsmNEK9WjjLl4Q3xs_9/embed?start=false&loop=true&delayms=3000" frameborder="0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
        <article>
          <p>This slide deck shows the potentially troublesome experience a hacker encounters during her hackathon team project, and the steps she could take before, during, and after the hackathon to mitigate those potential issues. Hackathon participants and organizers should keep in mind that participants can be empowered to create an experience tailored to their needs. </p>
        </article>
        </article>

      <article>
        <h2>User Story Podcast</h2>
        <article>
          <p>Based on a true story: This podcast interviews Samantha, a first time hacker whose contributions helped her team win! Her experience shows that even with minimal coding experience, one could still make meaningful contributions to a hackathon team project. </p>
        </article>
        <iframe
          frameborder="0"
          width="500"
          height="100"
          src="https://drive.google.com/file/d/1ERuFKgzmGq0NzdSDwM15qzz98wlhJhtS/preview?usp=drive_link">
        </iframe>
        <button id="toggleTranscript">Show Transcript</button>
        <div id="transcript" style="display: none; height: 50vh; overflow-y: scroll;">
          <article style="background-color: var(--pico-color-sand-700);">
            <p id="transcriptContent"></p>
          </article>
        </div>

        <script>
            document.getElementById('toggleTranscript').addEventListener('click', function() {
            var transcriptDiv = document.getElementById('transcript');
            var transcriptContent = transcriptDiv.querySelector('p');
            if (transcriptDiv.style.display === 'none') {
              fetch('transcript.txt')
            .then(response => response.text())
            .then(data => {
            var formattedData = data.replace(/(?:\r\n|\r|\n)/g, '<br>');
            transcriptContent.innerHTML = formattedData;
            transcriptDiv.style.display = 'block';
            this.textContent = 'Hide Transcript';
            });
            } else {
              transcriptDiv.style.display = 'none';
              this.textContent = 'Show Transcript';
            }
            });
        </script>
        </article>

        <article>
        <h2>Hacker Archetypes</h2>
        <p>These archetypes describe four different types of hackers. A corresponding graphic describes the relative time commitment the different hackers allocate in terms of project development, learning and discovery, interpersonal connections, and hackathon experiences. Think about which archetype you are and use this to budget your time based on your goals. (Note: there may be more than these archetypes and you can be a blend of two or more)</p>
        <!-- <p>Here are four archetypes of hackathon participants that are based on their actions. Some archetypes are characterized by prioritizing their hackathon Project and spending most of their time and energy on it. Others equally spend their time across the hackathon's learning opportunities and fun events (Hackathon XP) while also working on a Project.</p> -->
        <ul>
          <li>Project: Time spent working on the project</li>
          <li>Learning Time: Time spent learning the specific tech stack at the hackathon</li>
          <li>Hackathon XP: Time spent engaging with opportunities, resources, and events at the hackathon</li>
          <li>Personal Time: Time spent eating, resting, other work, etc.</li>
        </ul>
        <img src="hackathon-archetypes.png">
        <article>
          <p>The Builder: Roberta codes every day and is always curious about new technologies and approaches. However, in her normal day-to-day life, there's not enough space to pick up new skills or develop side projects. She loves hackathons because it is an opportunity to have focused time to learn a new tool, language, or technique while building a product as part of a motivated team. Roberta attends all the workshops relevant to her project and works on projects that are personally relevant, leading projects if necessary. </p>
          <p>The Diplomat: Derrick may or may not code for a living, but hackathons are still a major part of his regular activities. This is because he sees them as a concentration of interesting and fun people. During hackathons, Derrick spends his time hanging out with regulars who become friends, participating in official hack side activities, and interacting with people from different departments. Derrick leaves hackathons refreshed and ready to go back to his regular duties. </p>
          <p>The Explorer: Programming is somewhat familiar to Jack but it may not be a major part of his career. He enjoys going to hackathons without any particular agenda to participate in activities he wouldn't normally have access to, such as domain specific workshops, talks from vendors or industry representatives, and social outings. To Jack, a hackathon is an opportunity to briefly immerse in a stream of new knowledge, which might help him later on. </p>
          <p>The Strategist: Dominique is an experienced programmer with many ideas that just need time to implement. She strategically enters hackathons in which her projects would be likely to take home the top prize or be a featured product. Dominique is an organized and effective team leader and uses her expertise to properly scope projects so that they can be finished and polished by presentation time. She spends the majority of her time working on the project and is generally not interested in workshops or other activities. </p>
        </article>

      </article>
      <footer>
        <hr>
        <p>
          This project was built at <a href="https://hackthehackathon.com">HTH vol. 4</a> in San Diego.
        </p>
        <p>This project was built by:</p>
        <ul>
          <li><a href="lei_ma@g.harvard.edu">Lei Ma</a></li>
          <li><a href="arokem@uw.edu">Ariel Rokem</a></li>
          <li><a href="irene-angelica.chounta@uni-due.de">Irene-Angelica Chounta</a></li>
          <li><a href="really.rlay@gmail.com">Ryan Lay</a></li>
          <li><a href="laitanawe@gmail.com">Olaitan Awe</a></li>
          <li><a href="katherine.pitts@noaa.gov">Katie Pitts</a></li>
          <li><a href="">Steven Gum</a></li>
        </ul>
      </footer>
    </main>
  </body>
</html>