blog_details.html

<!doctype html>
<html class="no-js" lang="zxx">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>栗 KURI 栗 team's website</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" type="image/x-icon" href="assets/kuri photos/BW-darkx150px.ico">

  <!-- CSS here -->
  <link rel="stylesheet" href="assets/css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
  <link rel="stylesheet" href="assets/css/slicknav.css">
  <link rel="stylesheet" href="assets/css/animate.min.css">
  <link rel="stylesheet" href="assets/css/magnific-popup.css">
  <link rel="stylesheet" href="assets/css/fontawesome-all.min.css">
  <link rel="stylesheet" href="assets/css/themify-icons.css">
  <link rel="stylesheet" href="assets/css/slick.css">
  <link rel="stylesheet" href="assets/css/nice-select.css">
  <link rel="stylesheet" href="assets/css/style.css">
  <link rel="stylesheet" href="assets/css/kuri_style.css">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>

<body>
<!-- Preloader Start -->
<div id="preloader-active">
  <div class="preloader d-flex align-items-center justify-content-center">
    <div class="preloader-inner position-relative">
      <div class="preloader-circle"></div>
      <div class="preloader-img pere-text">
        <img class="preloadicon" src="assets/img/kuri photos/Kuri_BW-light.ico" alt="">
      </div>
    </div>
  </div>
</div>
<!-- Preloader Start -->
<header>
  <!-- Header Start -->
  <div class="header-area header-transparent">
    <div class="main-header">
      <div class="header-bottom  header-sticky">
        <div class="container-fluid">
          <div class="row align-items-center">
            <!-- Logo -->
            <div class="col-xl-2 col-lg-1 col-md-1">
              <div class="logo">
                <a href="index.html"><img class="kuri_logonavbar" src="assets/img/kuri photos/Inline Logo BW-lightx150px.png" alt=""></a>
              </div>
            </div>
            <div class="col-xl-8 col-lg-8 col-md-8">
              <!-- Main-menu -->
              <div class="main-menu f-right d-none d-lg-block">
                <nav>
                  <ul id="navigation">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About us</a></li>
                    <li><a href="blog.html">Blogs</a>
                      <!-- <ul class="submenu">
                      </ul> -->
                    </li>
                    <li><a href="contact.html">Contact</a></li>
                  </ul>
                </nav>
              </div>
            </div>
            <!-- Mobile Menu -->
            <div class="col-12">
              <div class="mobile_menu d-block d-lg-none"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Header End -->
</header>
<main>
  <!-- Hero Start-->
  <div class="slider-area slider-bg ">
    <div class="single-slider d-flex align-items-center slider-height2 ">
      <div class="container">
        <div class="row">
          <div class="col-xl-12">
            <div class="hero-cap text-center pt-50">
              <h2>Game Description</h2>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Slider Shape -->
    <div class="slider-shape d-none d-lg-block">
      <img class="slider-shape1" src="assets/img/hero/top-left-shape.png" alt="">
      <img class="slider-shape2" src="assets/img/hero/right-top-shape.png" alt="">
      <img class="slider-shape3" src="assets/img/hero/left-botom-shape.png" alt="">
    </div>
  </div>
  <!--Hero End -->
  <!--================Blog Area =================-->
  <section class="blog_area single-post-area section-padding">

    <div class="container">


      <div class="row">
        <div class="col-lg-12">
          <div class="section-tittle text-center mb-100">
            <span>Our project</span>
            <h2>Welcome to our project showcase</h2>
          </div>


          <div class = "gallery header">
            <h1 class="gametitle">RMIT SGS network game</h1>
          </div>
        </div>


        <div class="col-xl-12 posts-list">
          <div class="single-post">

            <iframe src="https://miketvo.github.io/project/rmit-sgs-network-game/game.html" title="Spider Web" width="100%" height="700px" style="border:1px solid black;" ></iframe>


            <div class="blog_details">
              <h2>1. Overview
              </h2>

              <p class="italic">&emsp;&emsp;<i><b>•	Topic:</b></i></p>

              <p class="excert">
                &emsp;&emsp;For our project, we want to implement a game onto RMIT’s browser whenever a user cannot access the Wi-Fi. In other words, instead of sending a “no Internet connection” page onto the user's browser when the connection is out, we want to send a page with our customized HTML game and an error message. Our game will be exclusively for the RMIT Saigon South Campus’s network, and the general design of the game will be minimalistic and have a retro/ arcade theme. The game will help users to destress from the slow connection, and the more players, the fewer devices connecting to the network. In general, it can make some users stay offline to prevent network congestion for a while, as well as reflect on the current situation of the campus’ network.
                <br><br>&emsp;&emsp;The game is very simple and easy to play: users will play as Rupert the Redback Spider (RMIT’s official mascot) and try to overcome all the obstacles to play as long as they can; the longer they play, the more points they accumulate.
                <br><br>&emsp;&emsp;If the game is going to be placed in the campus’s network, it can become the school’s artefact like the number four block with colorful LEDs on the School of Science and Technology floor. This game is not a solution to the campus’ Wi-Fi connection problems; it is just a game for students and staff to play when the Wi-Fi is slow, and RMIT still has to update the network’s hardware and improve the Internet connection. However, it can reduce the stress level of students and staff facing a slow connection.

              </p>

              <p class="italic">&emsp;&emsp;<i><b>•	Landscape:</b></i></p>

              <p class="excert">
                &emsp;&emsp;A similar product to this is the Dinosaur game on the Google Chrome web browser that appears when there is no Internet connection, and our ideas and game are based on this game. However, the main difference is that our game is implemented into our university’s network only, so it is delivered only to people who are having trouble connecting to RMIT’s Wi-Fi. Hence, our product does not exactly face any competition since our school currently does not have a similar product to this in their system. Another difference is that we will customize and design the game so that it represents our school. For example, instead of having a dinosaur, we will design the character in the game as Rupert the Redback Spider, which is RMIT’s official mascot, to show that the game is unique and special to RMIT. Some other differences are that for our game, the spider can move both forward and backward, and instead of jumping up and down like in the Dinosaur game, the spider is hanging from a web in our game. Additionally, we also have a lives system, meaning that our spider will have three lives per round instead of just one like the Dinosaur game.


              </p>

              <p class="italic">&emsp;&emsp;<i><b>•	Motivation:</b></i></p>

              <p class="excert">
                &emsp;&emsp;Our main motivation behind this project is the Wi-Fi connection issues that frequently occur at RMIT University. Many RMIT students have complained about the slow Wi-Fi and problems connecting to the internet, and this situation is very troublesome and inconvenient, especially when students need an internet connection to finish their assignments. Some of us even experienced this firsthand: we could not create a GitHub account during our first tutorial session because the Wi-Fi was too slow, and it was very frustrating. Hence, this project is both significant and interesting for us because we want to provide RMIT students with a fun game to ease out their frustration, a game that can help them relax and entertain themselves when they cannot connect to the school’s internet.
                <br><br>&emsp;&emsp;If we could work on this project and deliver a fully functional product, it would show to future employers our game development skills and our proficiency and understanding of network administration, since we also need to implement the game into RMIT’s network.


              </p>


              <h2>2. Testing
              </h2>

              <p class="excert">
                &emsp;&emsp;For testing, the Game Development team will directly test the game’s functionality on their machine before making any pushes to the main branch of our Github repository. When the game is playable and around 80% done, we will do the Alpha testing on different browsers (common ones like Google Chrome, Edge/IE, Firefox, Safari, Opera) with different versions to check the game’s compatibility. Each member of Kuri will try the game and give feedback during the Alpha testing process so that the Game Development team can fix any new-found bugs and improve the game. After this, we will carry out Beta Testing by sending the game to our classmates in the Introduction to IT course and our friends. There are no prerequisites for the testers, we only need them to play the game and give feedback about some aspects of the game, such as graphics and gameplay. Next, the game will be implemented on a sample network of a member’s home to test the game in a network.
              </p>
            </div>
          </div>
          <div class="navigation-top">

          </div>
          <div class="navigation-area">
            <div class="row">
              <div
                      class="col-lg-6 col-md-6 col-12 nav-left flex-row d-flex justify-content-start align-items-center">

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
  </section>
  <!--================ Blog Area end =================-->
</main>
<footer>
  <!-- Footer Start-->
  <div class="footer-area">
    <div class="container">
      <div class="footer-bottom">
        <div class="row d-flex justify-content-between align-items-center">
          <div class="col-xl-9 col-lg-9 ">
            <div class="footer-copy-right">
              <p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
                Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | </p>
            </div>
          </div>
          <div class="col-xl-3 col-lg-3">
            <!-- Footer Social -->
            <div class="footer-social f-right">
              <a href="https://github.com/kuri-team"><i class="fab fa-github"></i></a>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Footer End-->
</footer>
<!-- Scroll Up -->
<div id="back-top" >
  <a title="Go to Top" href="#"> <i class="fas fa-level-up-alt"></i></a>
</div>

<!-- JS here -->
<!-- All JS Custom Plugins Link Here here -->
<script src="./assets/js/vendor/modernizr-3.5.0.min.js"></script>
<!-- Jquery, Popper, Bootstrap -->
<script src="./assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="./assets/js/popper.min.js"></script>
<script src="./assets/js/bootstrap.min.js"></script>
<!-- Jquery Mobile Menu -->
<script src="./assets/js/jquery.slicknav.min.js"></script>

<!-- Jquery Slick , Owl-Carousel Plugins -->
<script src="./assets/js/owl.carousel.min.js"></script>
<script src="./assets/js/slick.min.js"></script>

<!-- One Page, Animated-HeadLin -->
<script src="./assets/js/wow.min.js"></script>
<script src="./assets/js/animated.headline.js"></script>
<script src="./assets/js/jquery.magnific-popup.js"></script>

<!-- Nice-select, sticky -->
<script src="./assets/js/jquery.nice-select.min.js"></script>
<script src="./assets/js/jquery.sticky.js"></script>

<!-- contact js -->
<script src="./assets/js/contact.js"></script>
<script src="./assets/js/jquery.form.js"></script>
<script src="./assets/js/jquery.validate.min.js"></script>
<script src="./assets/js/mail-script.js"></script>
<script src="./assets/js/jquery.ajaxchimp.min.js"></script>

<!-- Jquery Plugins, main Jquery -->
<script src="./assets/js/plugins.js"></script>
<script src="./assets/js/main.js"></script>

<script>
    var slideIndex = 1;
    showDivs(slideIndex);

    function plusDivs(n) {
        showDivs(slideIndex += n);
    }

    function currentSlide(n) {
        showDivs(slideIndex = n);
    }

    function showDivs(n) {
        var i;
        var x = document.getElementsByClassName("mySlides");
        if (n > x.length) {slideIndex = 1}
        if (n < 1) {slideIndex = x.length}
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        x[slideIndex-1].style.display = "block";
    }

</script>

</body>

</html>