index.php

<?php include 'includes/header.php'; ?>
<title>Field Day Learning Games</title>
<meta name="description" content="Field Day Lab">
</head>
<!--include main navigation-->
<?php include 'includes/main-nav.php'; ?>
<!-- start page template -->
<div class="home-page">
    <section id="carousel">
        <div id="carousel-hero" class="carousel slide carousel-fade">

            
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active narrow-video" style="background-image: url('assets/img/home/carousel/bloom-poster.png');">
                    <div class="info">
                        <img src="assets/img/home/carousel/bloom-logo.png" alt="Bloom: The Sage of the Fertilizer Economy game logo" />
                        <p class="small">Create trade networks and policies that keep farmers in business, while protecting local lakes and rivers.</p>
                        <a href="play/bloom" class="button yellow filled small">Learn More</a>
                    </div>
                    <span class="scanlines"></span>
                    <video preload="none" muted loop class="carousel-video">
                        <source src="assets/video/home/carousel/bloom.mp4" type="video/mp4">
                    </video>
                </div>
                <div class="item" style="background-image: url('assets/img/home/carousel/wake-poster.png');">
                    <div class="info">
                        <img src="assets/img/home/carousel/wake-logo.png" alt="Wake: Tales From the Aqualab game logo" />
                        <p class="small">Take on the role of a scientist as you study ocean ecosystems, travel to exciting ocean research stations, and work with fellow scientists to solve problems.</p>
                        <a href="play/wake" class="button yellow filled small">Learn More</a>
                    </div>
                    <span class="scanlines"></span>
                    <video preload="none" muted loop class="carousel-video">
                        <source src="assets/video/home/carousel/aqualab.mp4" type="video/mp4">
                    </video>
                </div>

                <div class="item" style="background-image: url('assets/img/home/carousel/journalism-poster.png');">
                    <div class="info">
                        <img src="assets/img/home/carousel/headlines-logo.png" alt="Headlines and High Water game logo" />
                        <p class="small">Play as a journalist in the town of Twin Lakes. Will the stories you publish help the town prepare for the flood of the century?</p>
                        <a href="play/headlines" class="button yellow filled small">Learn More</a>
                    </div>
                    <span class="scanlines"></span>
                    <video preload="none" muted loop class="carousel-video">
                        <source src="assets/video/home/carousel/journalism.mp4" type="video/mp4">
                    </video>
                </div>
                <div class="item item-nomobile" style="background-image: url('assets/img/home/carousel/shipwrecks-poster.png');">
                    <div class="info">
                        <img src="assets/img/home/carousel/emerald-logo.png" alt="Legend of the Lost Emerald game logo" />
                        <p class="small">Play as a maritime archaeologist uncovering shipwrecks in the Great Lakes. Made in partnership with PBS Wisconsin and Wisconsin Sea Grant</p>
                        <a href="play/emerald" class="button yellow filled small">Learn More</a>
                    </div>
                    <span class="scanlines"></span>
                    <video preload="none" muted loop class="carousel-video">
                        <source src="assets/video/home/carousel/shipwrecks.mp4" type="video/mp4">
                    </video>
                </div>

            </div>

            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-hero" data-slide-to="0" class="active">
                    <img src="assets/img/games/thumbs/bloom.jpg" alt="Bloom Thumbnail" />
                    <div class="thumb-caption">Bloom: The Saga of the Fertilizer Economy</div>
                </li>
                <li data-target="#carousel-hero" data-slide-to="1">
                    <img src="assets/img/games/thumbs/wake.jpg" alt="Wake Thumbnail" />
                    <div class="thumb-caption">Wake: Tales From The Aqualab</div>
                </li>
                <li data-target="#carousel-hero" data-slide-to="2">
                    <img src="assets/img/games/thumbs/headlines-thumb.jpg" alt="Headlines Thumbnail" />
                    <div class="thumb-caption">Headlines and High Water</div>
                </li>
                <li data-target="#carousel-hero" data-slide-to="3" class="indicator-nomobile">
                    <img src="assets/img/games/thumbs/emerald.jpeg" alt="Emerald Thumbnail" />
                    <div class="thumb-caption">Legend of the Lost Emerald</div>
                </li>
                <li>
                    <a href="play">
                        <div class="play-our-games-controller">
                            <img src="assets/img/home/carousel/group-1014.png" alt="Game Controller" />
                        </div>
                        <div class="thumb-caption">
                            More Games
                        </div>
                    </a>
                </li>
            </ol>

            
            
            
        </div>
    </section>
    <section id="welcome">
        <div class="container">
            <h2>We are Field Day</h2>
            <p>We are a team of artists, engineers, designers, researchers, writers, and game lovers.</p>
            <p>Welcome to our lab. Here's how we steer the ship.</p>
            <img src="assets/img/home/yellow-arrow.png" alt="down arrow">
        </div>
        <div class="ship floatslow">
            <img src="assets/img/home/site-boat.png" alt="ship cutaway">
        </div>
        <div class="water-pattern"></div>
    </section>
    <div class="bottom-frame z100"></div>
    <section id="whygames" class="ship-room lead d-flex flex-col flex-xxl-row z99">
        <div class="helm-water">
            <div class="helm"></div>
            <!--<h3 class="d-xxl-none ribbon">Why Games?</h3>-->
            <div class="helm-frame"></div>
        </div>
        <div class="container d-flex flex-col flex-lg-reverse flex-xxl-col">
            <div class="section-img">
                <img src="assets/img/home/game-card.png" alt="gamer id card">
            </div>
            <div class="hero-text">
                <h4>Games let you try on a new identity.</h4>
                <p>Games are an important tool for teachers because they allow players to take on the role of scientists, journalists, explorers, and more.</p>
            </div>
        </div>
    </section>
    <div class="bottom-frame z100"></div>
    <section id="complextopics" class="ship-room lead d-flex flex-col flex-xxl-reverse z99">
        <div class="observation-tank-container">
            <div class="observation-tank">
                <img class="otter1 floatslow" src="assets/img/home/otter1.png" alt="cute otters floating in an observation tank" />
                <img class="otter2 float" src="assets/img/home/otter2.png" />
            </div>
        </div>
        <div class="container d-flex flex-col flex-lg-row flex-xxl-col">
            <div class="section-img">
                <img src="assets/img/home/gamer-kid.png" alt="a person standing tall with a tablet in hand">
            </div>
            <div class="hero-text">
                <h4>Games explore complex topics.</h4>
                <p>It's hard to communicate super complex topics in a short time frame. Games turn complicated topics into fun,
                    hands-on experiences that actually reach people. Our games get millions of plays.
                </p>
            </div>
        </div>
    </section>
    <div class="bottom-frame z100"></div>
    <section id="wherethekidsare" class="ship-room lead d-flex flex-col flex-xxl-row z99">
        <div class="cabin-water">
            <div class="cabin"></div>
            <div class="helm-frame"></div>
        </div>
        <div class="container d-flex flex-col flex-lg-reverse flex-xxl-col">
            <div class="section-img">
                <img src="assets/img/home/kids.png" alt="a group of young explorers posing heroically">
            </div>
            <div class="hero-text">
                <h4>Games are where the kids are.</h4>
                <p>Kids spend a lot of time playing games these days. We love making something that can help them interact with the complicated, amazing world that they live in. Our games get played by millions of kids each year.
                </p>
            </div>
        </div>
    </section>
    <div class="bottom-frame z100"></div>
    <section id="modelingroom" class="ship-room lead d-flex flex-col flex-xxl-reverse z100">
        <div class="modeling-container">
            <div class="modeling-monitor">
                <video autoplay muted loop>
                    <source src="assets/video/ModelingRoom_Monitor.mp4" type="video/mp4">
                </video>
            </div>
            <div class="modeling-room">
                <img class="modeling-reel" src="assets/img/home/ModelingRoom_Reel.png">
            </div>
        </div>
        <div class="container hero-text">
            <h4>Games as Assessment</h4>
            <p>Our research team leverages data science to create meaningful insights out of mountains of player data. We help researchers and educators understand how kids learn.</p>
        </div>
    </section>
    <div class="bottom-frame z100"></div>
    <section id="howdowemake" class="d-flex flex-col deepsea">
        <div class="container d-flex flex-col z100">
            <h3>
                HOW DO WE MAKE GAMES?
            </h3>
            <h4>
                Partnerships are the foundation of our design practice.
            </h4>
            <p>
                Each of our games is made in collaboration with a team of researchers, subject matter experts, scientists, teachers, and kids.
            </p>

            <div class="bios">
                <!-- Gridder navigation -->
                <ul class="apps gridder" role="menu">
                    <li class="gridder-list app-card" data-griddercontent="#person1" role="menuitem">
                        <img src="/assets/img/home/partners/sue-robinson.jpg" alt="Sue Robinson" class="partner-img">
                        <img class="collapse-arrow invisible" src="/assets/img/home/blue-arrow.png" alt="down arrow">
                    </li>
                    <li class="gridder-list app-card" data-griddercontent="#person2" role="menuitem">
                        <img src="/assets/img/home/partners/victor-zavala.jpg" alt="Victor Zavala" class="partner-img">
                        <img class="collapse-arrow invisible" src="/assets/img/home/blue-arrow.png" alt="down arrow">
                    </li>
                    <li class="gridder-list app-card" data-griddercontent="#person3" role="menuitem">
                        <img src="/assets/img/home/partners/john-pfotenhauer.jpg" alt="John Pfotenhauer" class="partner-img">
                        <img class="collapse-arrow invisible" src="/assets/img/home/blue-arrow.png" alt="down arrow">
                    </li>
                    <li class="gridder-list app-card" data-griddercontent="#person4" role="menuitem">
                        <img src="/assets/img/home/partners/anne-moser.jpg" alt="Anne Moser" class="partner-img">
                        <img class="collapse-arrow invisible" src="/assets/img/home/blue-arrow.png" alt="down arrow">
                    </li>
                </ul>
                <!-- Gridder content -->          
                <div id="person1" class="app-expanded gridder-content">
                    <div class="panel">
                        <div class="panel-body text-left d-flex flex-col flex-lg-row">
                            <div class="panel-img">
                                <img src="/assets/img/gameplay/headlines2.jpg" alt="Headlines and High Water game play">
                            </div>
                            <div class="panel-text">
                                <h4>
                                    Sue Robinson:
                                </h4>
                                <h5>
                                    Helen Firstbrook Franklin Professor of Journalism, UW-Madison
                                </h5>
                                <p>
                                    "Working with Field Day Lab on our Headlines and High Water journalism video game has been a highlight of my career to date. The team is competent, responsive, creative, and brilliant and, furthermore, they are a dream to collaborate with. I am already seeking new projects we might do together!"
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="person2" class="app-expanded gridder-content">
                    <div class="panel">
                        <div class="panel-body text-left d-flex flex-col flex-lg-row">
                            <div class="panel-img">
                                <img src="/assets/img/gameplay/bloom.jpg" alt="Bloom: The Saga of the Fertilizer Economy">
                            </div>
                            <div class="panel-text">
                                <h4>
                                    Victor Zavala:
                                </h4>
                                <h5>
                                    Professor, Chemical & Biological Engineering, College of Engineering, UW-Madison
                                </h5>
                                <p>
                                    "The most memorable thing about the game design process was meeting the high school teachers. It was refreshing to see how committed they were."
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="person3" class="app-expanded gridder-content">
                    <div class="panel">
                        <div class="panel-body text-left d-flex flex-col flex-lg-row">
                            <div class="panel-img">
                                <img src="/assets/img/gameplay/thermo-lab.jpg" alt="Thermodynamics VR">
                            </div>
                            <div class="panel-text">
                                <h4>
                                    John Pfotenhauer:
                                </h4>
                                <h5>
                                    Professor Emeritus, College of Engineering, UW-Madison
                                </h5>
                                <p>
                                    "Working with the Field Day Lab has been a transformative experience for my research group. They have taught me so much about creative thinking, visualization, teaching, and effective communication. I am now implementing some of these practices in our own research. The Field Day Lab is a special group of individuals that are pushing the boundaries of STEM outreach and education."
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="person4" class="app-expanded gridder-content">
                    <div class="panel">
                        <div class="panel-body text-left d-flex flex-col flex-lg-row">
                            <div class="panel-img">
                                <img src="/assets/img/gameplay/emerald.jpg" alt="Legend of the Lost Emerald">
                            </div>
                            <div class="panel-text">
                                <h4>
                                    Anne Moser:
                                </h4>
                                <h5>
                                    Senior Special Librarian and Education Coordinator, Wisconsin Sea Grant
                                </h5>
                                <p>
                                    "Having educators, maritime archaeologists, game designers, writers, Sea Grant specialists, coders and artists in one room to learn from each other and to brainstorm created an educational tool that brings to life our maritime history in a way that is meaningful, impactful and just darn fun."
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>     

            <div class="divider"></div>

            <h3>
                GAMES DESIGNED FOR THE CLASSROOM
            </h3>
            <p>
                It feels great when kids ask if they can keep playing our games when class is over (the answer is yes!) but our games are designed and tested to work in class. We create them with input from education standards and our teacher fellowship program.
            </p>
            <p>
              
            </p>            
        
            <div class="divider"></div>

             <h4>
                And did we mention they're free?
             </h4>
            <p>
                  Our games are always completely free for the public and available online. No ads. No grinding. No subscriptions, no logins, no hidden fees, and no microtransactions.
            </p>
            <a href="/play" class="button small yellow filled">Play our games</a>

            <!-- BUBBLES SECTION -->
            <div class="bubble-container">
                <figure class="bubble bubble-xl float">
                    <blockquote>
                        <p>"Jo Wilder helps develop historical inquiry skills while meeting state standards and, of course, keeps kids engaged and excited!"</p>
                    </blockquote>
                    <figcaption>
                        Mike Scoville<br>
                        Gibraltar Area School District
                    </figcaption>
                </figure>
                <figure class="bubble bubble-lg float">
                    <blockquote>
                        <p>"This well crafted game is well worth those precious classroom minutes. My students keep begging me to play again!"</p>
                    </blockquote>
                    <figcaption>
                        Katherine Seibel<br>
                        Auburndale Elementary
                    </figcaption>
                </figure>
                <figure class="bubble bubble-md floatslow">
                    <blockquote>
                        <p>"If I didn't play this game, I wouldn't have been into history."</p>
                    </blockquote>
                    <figcaption>
                        4th Grader<br>
                        Elmwood Elementary
                    </figcaption>
                </figure>
                <figure class="bubble bubble-sm floatslow">
                    <blockquote>
                        <p>"Can we play it again?"</p>
                    </blockquote>
                    <figcaption>
                        4th grader<br>
                        Burlington, WI
                    </figcaption>
                </figure>
                <div class="bubble-empty bubble-xs float"></div>
                <div class="bubble-empty bubble-xxs floatslow"></div>
                <img class="deepsea-sub floatslow" src="/assets/img/home/deepsea-sub.png" alt="submarine">
            </div>
        </div>
    </section>
    <div class="ocean-floor">
        <img class="kelp1" src="/assets/img/home/giant-kelp.png">
        <img class="kelp2" src="/assets/img/home/giant-kelp.png">
        <img class="kelp3" src="/assets/img/home/giant-kelp.png">
        <img class="kelp4" src="/assets/img/home/giant-kelp.png">
    </div>    
</div>

<!--include footer-->
<?php include 'includes/footer-homepage.php';?>

<!--include modals-->
<?php include 'includes/modals.php';?>
<script>
  // toggle navbar spotlight when make games section scrolls into view
  $(window).scroll(function() {
      $(this).scrollTop() >= $('#howdowemake').offset().top-$(this).height() ? $('.spotlight').removeClass('hide') : $('.spotlight').addClass('hide');
  });

    $(function() {
        // Call Gridder
        $('.gridder').gridderExpander({
            scroll: true,
            scrollOffset: 100,
            scrollTo: "panel",                  // panel or listitem
            animationSpeed: 900,
            animationEasing: "easeInOutExpo",
            showNav: true,                      // Show Navigation
            nextText: "",                   // Next button text
            prevText: "",               // Previous button text
            closeText: "<img src=\"/assets/img/home/blue-close.png\">", // Close button text
            onStart: function(){
                //Gridder Inititialized
            },
            onContent: function(){
                //Gridder Content Loaded
                // add role to close link
                $('.gridder-close').attr("role", "button").attr("aria-label", "Close");
                // hide any visible down arrows
                $('.gridder-list:not(.selectedItem) .collapse-arrow').addClass('invisible');
                // show arrow for selected person
                $('.gridder-list.selectedItem .collapse-arrow').removeClass('invisible');
            },
            onClosed: function(){
                //Gridder Closed
                // hide down arrows
                $('.gridder-list .collapse-arrow').addClass('invisible');
            }
        });
    });
</script>
</body>

</html>