index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Reduct Redux: A Game to Teach Coding Comprehension</title>
        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Fira+Mono|Fira+Sans|Nanum+Pen+Script|Material+Icons" />
        <style>
         body {
             font-family: "Fira Sans", Arial, sans-serif;
             background: #8ab7db;
             margin: 0;
             padding: 0;
         }

         button, #nav > a {
             font-family: inherit;
             background: lightblue;
             font-size: 0.9em;
             padding: 0.25em;
             border: 1px solid #8ab7db;
             border-top: 0;
             border-bottom: 0;
             border-radius: 10px;
             cursor: pointer;
             line-height: 2.5em;
             text-align: center;
         }

         #nav > a {
             text-decoration: none;
             color: inherit;
             display: block;
             flex: 0 0;
         }

         button:hover {
             background: #b9e7f7;
         }

         canvas {
             display: block;
             margin: 0 auto;
         }
         #nav {
             display: none;
             margin: 0 auto;
             height: 2.5em;
             /* prevent selection of text at top */
             -webkit-touch-callout: none;
             -webkit-user-select: none;
             -khtml-user-select: none;
             -moz-user-select: none;
             -ms-user-select: none;
             user-select: none;
         }
         #nav > * {
             flex: 1;
         }
         #nav > select {
             flex: 0.5;
         }

         #nav button.dev {
             width: 4em;
         }

         #pause i:nth-child(2) {
             display: none;
         }

         #pause.paused i:nth-child(1) {
             display: none;
         }

         #pause.paused i:nth-child(2) {
             display: inline-block;
         }

         #ffwd.active {
             background: #6d8891;
         }

         #current-level, #animation-speed {
             flex: 1 0 5em;
             color: #FFF;
             vertical-align: middle;
             text-align: center;
         }

         #current-level, #chapter {
             display: none;
         }

         #current-level {
             font-family: "Nanum Pen Script", sans-serif;
             font-size: 2em;
             align-items: center;
         }

         #state-graph {
             padding: 0;
             position: absolute;
             left: 0;
             top: 2.5em;
             width:400px;
             height:400px;
             background: #111;
         }

         #consent, .fade-container {
             position: fixed;
             top: 0;
             left: 0;
             right: 0;
             bottom: 100%;
             background: rgba(0, 0, 0, 0.7);
             opacity: 0;
             transition: all 0.5s ease-in-out;
         }

         #consent.visible, .fade-container.visible {
             bottom: 0;
             opacity: 1;
             display: flex;
             flex-direction: column;
             justify-content: center;
         }

         #consent.visible #consent-inner, .fade-container.visible > div {
             display: block;
         }

         #consent-inner {
             height: 40em;
         }

         #consent-inner, .fade-container > div {
             display: none;
             background: #FFF;
             width: 40em;
             margin: 0 auto;
             position: fixed;
             left: 50%;
             transform: translateX(-50%);
         }

         #consent-inner button, .fade-container.visible button {
             font-size: 1em;
             padding: 0.5em;
             border-radius: 0;
             border: 1px solid #000;
         }

         #consent-inner h1 {
             height: 3rem;
             line-height: 3rem;
             margin: 0;
             padding: 0 1rem;
         }

         #consent-body {
             height: calc(100% - 3rem);
             overflow-y: scroll;
             padding: 0 1rem;
         }

         .password-prompt {
             margin: 1rem;
             text-align: center;
             font-size: 1.5em;
         }

         .password-prompt input[type="password"] {
             display: block;
             margin: 0 auto;
             font-size: 1.25em;
         }

         .dev {
             display: none;
         }

         #credits {
             flex: 0 0;
         }

         #credits a {
             color: inherit;
             text-decoration: none;
         }

         .reduct-toolbar {
             z-index: 9999;
             position: absolute;
             display: flex;

             box-shadow: 0 5px 0 black;
             border-radius: 10px;
         }
         .mobile-phone .reduct-toolbar {
             font-size: 2em;
         }

         #reduct-toolbar-proto {
             display: none;
         }

         .reduct-toolbar button {
             line-height: 1em;
         }

         .reduct-toolbar button:active {
             transform: translateY(5px);
         }

         .reduct-toolbar button:first-child {
             border-radius: 10px 0 0 10px;
         }
         .reduct-toolbar button:first-child i:first-child {
             display: inline;
         }
         .reduct-toolbar button:first-child i:last-child {
             display: none;
         }
         .reduct-toolbar button:last-child {
             border-radius: 0 10px 10px 0;
         }

         .reduct-toolbar.playing button:first-child {
             border-radius: 10px;
         }
         .reduct-toolbar.playing button:first-child i:first-child {
             display: none;
         }
         .reduct-toolbar.playing button:first-child i:last-child {
             display: inline;
         }
         .reduct-toolbar.playing button:last-child {
             display: none;
         }

         /* https://loading.io/css/ */
         #loading-container {
             position: fixed;
             top: 0;
             right: 0;
             left: 0;
             bottom: 0;
         }
         #loading-spinner {
             display: inline-block;
             position: relative;
             width: 64px;
             height: 64px;
             left: 50%;
             top: 50%;
             transform: translateY(-50%) translateX(-50%) scale(3);
         }
         #loading-spinner div {
             position: absolute;
             width: 5px;
             height: 5px;
             background: #fff;
             border-radius: 50%;
             animation: loading-spinner 1.2s linear infinite;
         }
         #loading-spinner div:nth-child(1) {
             animation-delay: 0s;
             top: 29px;
             left: 53px;
         }
         #loading-spinner div:nth-child(2) {
             animation-delay: -0.1s;
             top: 18px;
             left: 50px;
         }
         #loading-spinner div:nth-child(3) {
             animation-delay: -0.2s;
             top: 9px;
             left: 41px;
         }
         #loading-spinner div:nth-child(4) {
             animation-delay: -0.3s;
             top: 6px;
             left: 29px;
         }
         #loading-spinner div:nth-child(5) {
             animation-delay: -0.4s;
             top: 9px;
             left: 18px;
         }
         #loading-spinner div:nth-child(6) {
             animation-delay: -0.5s;
             top: 18px;
             left: 9px;
         }
         #loading-spinner div:nth-child(7) {
             animation-delay: -0.6s;
             top: 29px;
             left: 6px;
         }
         #loading-spinner div:nth-child(8) {
             animation-delay: -0.7s;
             top: 41px;
             left: 9px;
         }
         #loading-spinner div:nth-child(9) {
             animation-delay: -0.8s;
             top: 50px;
             left: 18px;
         }
         #loading-spinner div:nth-child(10) {
             animation-delay: -0.9s;
             top: 53px;
             left: 29px;
         }
         #loading-spinner div:nth-child(11) {
             animation-delay: -1s;
             top: 50px;
             left: 41px;
         }
         #loading-spinner div:nth-child(12) {
             animation-delay: -1.1s;
             top: 41px;
             left: 50px;
         }
         @keyframes loading-spinner {
             0%, 20%, 80%, 100% {
                 transform: scale(1);
             }
             50% {
                 transform: scale(1.5);
             }
         }

         #tutorial > div {
             padding: 1em;
             text-align: center;
         }

         #tutorial > div > p {
             font-size: 1.25em;
         }
        </style>
    </head>
    <body>
        <div id="loading-container">
        <div id="loading-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
        </div>
        <div id="nav">
            <select id="chapter"></select>
            <div class="dev" id="animation-speed">
                <span>Animation Speed</span>
                <input type="range" min="0.1" max="3" step="0.1" value="1" list="tickmarks" id="animation-speed-slider">
                <datalist id="tickmarks">
                    <option value="0.1" label="10x faster" />
                    <option value="1" label="1x" />
                    <option value="3" label="3x slower" />
                </datalist>
            </div>

            <button class="dev" id="download-log">Download Log JSON</button>
            <button class="dev" id="toggle-graph">Toggle State Graph</button>
            <a href="credits.html">Credits</a>
        </div>

        <nav class="reduct-toolbar" id="reduct-toolbar-proto">
            <button class="toolbar-play">
                <i class="material-icons">play_arrow</i>
                <i class="material-icons">pause</i>
            </button>
            <button class="toolbar-ffwd">
                <i class="material-icons">skip_next</i>
            </button>
        </nav>

        <div id="tutorial" class="fade-container">
            <div id="tutorial-inner">
                <p>Watch a tutorial before playing this level:</p>
                <p>
                    <a target="_blank">Watch Tutorial!</a>
                </p>
                <button id="tutorial-continue">Continue Playing!</button>
            </div>
        </div>

        <div id="consent">
            <div id="consent-inner">
                <h1>Research Consent Form</h1>

                <section id="consent-body">
                    <h2>Study Overview</h2>
                    <p>
                        We are asking you to participate in a research
                        study titled “Feedback for a Game to Teach
                        Programming Concepts”. We will describe this study
                        to you and answer any of your questions.  This
                        study is being led by Yiting Wang, Department of
                        Computer Science and the Faculty Advisor for this
                        study is Erik Andersen, Department of Computer
                        Science.
                    </p>

                    <h2>What this study is about</h2>
                    <p>
                        The purpose of this research is collect
                        information and feedback about student
                        interactions with an online game to teach
                        programming.
                    </p>

                    <h2>What we are asking you to do</h2>
                    <p>
                        If you agree to this study, we will first give a
                        brief lecture about some programming concepts, and
                        then you will play an online game for about 60
                        minutes. After this process, we will ask you to
                        complete an online survey. The purpose of our work
                        is to get feedback from students about the
                        game. By consenting to participate in the study,
                        you allow us to record your interactions with the
                        game through an anonymous logging mechanism, as
                        well as the responses to the survey. All data will
                        be completely anonymous.
                    </p>

                    <h2>Eligibility criteria</h2>
                    <p>
                        Participants must be over 18 years old and
                        currently enrolled at Cornell University.
                    </p>

                    <h2>Risks, Benefits</h2>
                    <p>We anticipate that your participation in this study
                        presents minimal risk to you. There are no direct
                        benefits to you, but we hope this study will improve
                        programming education for future students.</p>

                    <h2>Compensation</h2>
                    <p>There is no payment or course credit for taking part
                        in the study.</p>

                    <h2>Privacy/Confidentiality/Data Security</h2>
                    <p>Data from your play-through of the game and answers to
                        the web-based questionnaire will be anonymously
                        logged. We anticipate that your participation in the
                        survey presents no greater risk than everyday use of
                        the Internet. The records of this study will be kept
                        private. In any sort of report we make public we will
                        not include any information that will make it possible
                        to identify you. Research records will be kept in a
                        locked file only accessible to the researchers
                        conducting this study.</p>

                    <h2>Taking part is voluntary</h2>
                    <p>Your participation in this
                        study is voluntary and you may refuse to participate
                        before the study begins and discontinue at any
                        time. Taking part in the study or withdrawing without
                        completion will in no way affect your academic
                        standing, record, future/current employment status, or
                        relationship with Cornell or Computing and Information
                        Science.</p>

                    <h2>If you have questions</h2>
                    <p>The researchers conducting this
                        study are Yiting Wang, David Li, Yishu Zhang,
                        Prof. Erik Andersen, Prof. Francois Guimbretiere, and
                        Prof. Andrew Myers. If you have questions, please ask
                        them now. If you have questions later, you may contact
                        Yiting Wang at yw428@cs.cornell.edu or at 908-251-3614
                        or Erik Andersen at eland@cs.cornell.edu or at
                        607-255-8306. If you have any questions or concerns
                        regarding your rights as a subject in this study, you
                        may contact the Institutional Review Board (IRB) for
                        Human Participants at 607-255-6182 or access their
                        website at http://www.irb.cornell.edu. You may also
                        report your concerns or complaints anonymously through
                        Ethicspoint online at www.hotline.cornell.edu or by
                        calling toll free at 1-866-293-3077. Ethicspoint is an
                        independent organization that serves as a liaison
                        between the University and the person bringing the
                      complaint so that anonymity can be ensured.</p>

                <p><em>
                    I have read the above information and have
                    received answers to any questions I asked. I
                    consent to take part in the study.
                </em></p>

                <button id="consent-agree">I Agree</button>
                <button id="consent-disagree">I Disagree</button>

                <p>You may still play the game if you do not agree. We
                    will not collect or retain any information from
                    your play session.</p>
                </section>
            </div>
        </div>
        <script src="./src/index.js"></script>
    </body>
</html>