Difference between revisions of "Team:UESTC-software/Extra work"

 
(29 intermediate revisions by 3 users not shown)
Line 3: Line 3:
 
<head>
 
<head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
     <title>三级页面</title>
+
     <title>Extra Work: BIO2048</title>
 
     <link href="https://2016.igem.org/Team:UESTC-software/css/template/base?action=raw&ctype=text/css" rel="stylesheet" type="text/css" />
 
     <link href="https://2016.igem.org/Team:UESTC-software/css/template/base?action=raw&ctype=text/css" rel="stylesheet" type="text/css" />
 
     <link rel="stylesheet" type="text/css" href="https://2016.igem.org/Team:UESTC-software/css/template/threeLevel?action=raw&ctype=text/css" />
 
     <link rel="stylesheet" type="text/css" href="https://2016.igem.org/Team:UESTC-software/css/template/threeLevel?action=raw&ctype=text/css" />
Line 10: Line 10:
 
     <link href="https://2016.igem.org/Team:UESTC-software/css/template/footer?action=raw&ctype=text/css" rel="stylesheet" type="text/css" />
 
     <link href="https://2016.igem.org/Team:UESTC-software/css/template/footer?action=raw&ctype=text/css" rel="stylesheet" type="text/css" />
 
      
 
      
<style>
 
#HQ_page p {
 
font-size:16px;
 
}
 
p.title {
 
font-size:40px !important;
 
text-align: center !important;
 
}
 
#bodyContent a[href^="https://"], .link-https {
 
    padding-right: 0px;
 
}
 
</style>
 
 
</head>
 
</head>
 
<body>
 
<body>
 +
<a name="top" id="top"></a>
 
<header class="header">
 
<header class="header">
 
     <div class="header-content">
 
     <div class="header-content">
Line 32: Line 21:
 
                 <li><a href="https://2016.igem.org/Team:UESTC-software/Project?id=0">PROJECT</a>
 
                 <li><a href="https://2016.igem.org/Team:UESTC-software/Project?id=0">PROJECT</a>
 
                     <ul class="sub-nav">
 
                     <ul class="sub-nav">
                         <li><a href="https://2016.igem.org/Team:UESTC-software/Description?id=0&index=0">Description</a></li>
+
                         <li><a href="https://2016.igem.org/Team:UESTC-software/Description">Description</a></li>
                         <li><a href="https://2016.igem.org/Team:UESTC-software/Design?id=0&index=1">Design</a></li>
+
                         <li><a href="https://2016.igem.org/Team:UESTC-software/Design">Design</a></li>
                         <li><a href="https://2016.igem.org/Team:UESTC-software/Features?id=0&index=2">Features</a></li>
+
                         <li><a href="https://2016.igem.org/Team:UESTC-software/Features">Features</a></li>
                         <li><a href="https://2016.igem.org/Team:UESTC-software/Modeling?id=0&index=3">Modeling</a></li>
+
                         <li><a href="https://2016.igem.org/Team:UESTC-software/Model">Modeling</a></li>
                         <li><a href="https://2016.igem.org/Team:UESTC-software/Validation_and_testing?id=0&index=4">Validation and testing</a></li>
+
                       
                         <li><a href="https://2016.igem.org/Team:UESTC-software/Future?id=0&index=5">Future</a></li>
+
                         <li class="three-nav"><a href="https://2016.igem.org/Team:UESTC-software/Proof">Proof</a></li>
                         <li class="three-nav"><a href="https://2016.igem.org/Team:UESTC-software/Extra_work?id=0&index=6;">Extra Work—BIO1024</a></li>
+
                         <li class="three-nav"><a href="https://2016.igem.org/Team:UESTC-software/Demonstrate">Results</a></li>
                         <li class="three-nav"><a href="https://2016.igem.org/Team:UESTC-software/Extra_work?id=0&index=7;">Extra Work—BIO2048</a></li>
+
                         <li><a href="https://2016.igem.org/Team:UESTC-software/Future">Future</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:UESTC-software/Parts">Parts</a></li>
 +
                         <li class="three-nav"><a href="https://2016.igem.org/Team:UESTC-software/Extra_work">Extra Work—Bio2048</a></li>
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
 
                 <li><a href="https://2016.igem.org/Team:UESTC-software/Judging?id=1">JUDGING</a>
 
                 <li><a href="https://2016.igem.org/Team:UESTC-software/Judging?id=1">JUDGING</a>
 
                     <ul class="sub-nav">
 
                     <ul class="sub-nav">
                         <li><a href="https://2016.igem.org/Team:UESTC-software/Medal_requirements?id=1&index=0">Medal Requirements</a></li>
+
                         <li><a href="https://2016.igem.org/Team:UESTC-software/Medal_requirements">Medal Requirements</a></li>
                         <li><a href="https://2016.igem.org/Team:UESTC-software/Safety?id=1&index=1">Safety</a></li>
+
                         <li><a href="https://2016.igem.org/Team:UESTC-software/Safety?">Safety</a></li>
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
Line 51: Line 42:
 
                     <ul class="sub-nav">
 
                     <ul class="sub-nav">
 
                         <li><a href="https://2016.igem.org/Team:UESTC-software/Members?id=2&index=0">Team</a></li>
 
                         <li><a href="https://2016.igem.org/Team:UESTC-software/Members?id=2&index=0">Team</a></li>
                         <li><a href="https://2016.igem.org/Team:UESTC-software/Collaboration?id=2&index=1">Collaborations</a></li>
+
                         <li><a href="https://2016.igem.org/Team:UESTC-software/Collaborations">Collaborations</a></li>
                         <li><a href="https://2016.igem.org/Team:UESTC-software/Notebooks?id=2&index=2">Notebooks</a></li>
+
                         <li><a href="https://2016.igem.org/Team:UESTC-software/Notebooks">Notebooks</a></li>
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
                 <li><a href="https://2016.igem.org/Team:UESTC-software/Document?id=3&index=0">DOCUMENT</a></li>
+
                 <li><a href="https://2016.igem.org/Team:UESTC-software/HP">HUMAN PRACTICES</a>
                <li><a href="https://2016.igem.org/Team:UESTC-software/Human_Practices?id=4&index=0">HUMAN PRACTICES</a></li>
+
                    <ul class="sub-nav">
                 <li><a href="https://2016.igem.org/Team:UESTC-software/Attributions?id=5&index=0">ATTRIBUTIONS</a></li>
+
  <li><a href="https://2016.igem.org/Team:UESTC-software/HP/Silver">Silver</a></li>                      
 +
<li><a href="https://2016.igem.org/Team:UESTC-software/HP/Gold">Gold</a></li>
 +
                   
 +
                        <li><a href="https://2016.igem.org/Team:UESTC-software/Integrated_Practices">Integrated Practices</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:UESTC-software/Engagement">Engagement</a></li>
 +
                    </ul>
 +
                </li>
 +
                 <li><a href="https://2016.igem.org/Team:UESTC-software/Document">DOCUMENTS</a></li>
 +
               
 +
                <li><a href="https://2016.igem.org/Team:UESTC-software/Attributions">ATTRIBUTIONS</a></li>
 
             </ul>
 
             </ul>
 
         </nav>
 
         </nav>
Line 63: Line 63:
 
</header>
 
</header>
 
<div class="content-top">
 
<div class="content-top">
 
+
<img src="https://static.igem.org/mediawiki/igem.org/d/d9/Uestc_software-project_extra2.png">
 +
<p class="title">Extra Work</p>
 
</div>
 
</div>
 
<div class="detail-content">
 
<div class="detail-content">
 
+
<h1 style="font-size:180% !important;">Bio2048</h1>
 +
                <p class="img-p"><a href="https://www.youtube.com/watch?v=gDPVQBgcz64" target="_blank"><img src="https://static.igem.org/mediawiki/2016/e/e4/Uestc_software-game.png" /></a></p>
 +
               
 +
                <h2 id="Description">Description</h2>
 +
                <strong>Background</strong>
 +
                <p>Biology and life are tightly interrelated. After investigation (For more details, please view <a href="https://2016.igem.org/Team:UESTC-software/Human_Practices?id=4&index=0" style="color:#3C9CD3;" target="_blank"> Human Practice </a>), we found that huge amounts of people had little biological knowledge base. For instance, base pair, DNA, protein, organelle, cell, tissue, organ, system, individual, population, community, ecosystem, biosphere, these are important concepts in biology. The distance between ordinary people and those is so long that they nearly cannot touch it. Therefore, it’s imperative to spread the biological knowledge of the mass then to improve the quality of life.</p>
 +
                <strong>Overview</strong>
 +
                <p>In order to popularize biological knowledge and draw the public’s attention to biology from the basic level, UESTC-Software decided to adopt a more acceptant way to make more people be aware of the subject. We developed an Android game named Bio2048 based on the Grabriele Cirulli’s “2048”, a popular sliding block puzzle game. Instead of the numbers, the blocks are labeled with some common biological patterns, such as gene and protein. All the patterns form a biological ladder. If two patterns with the same biological terms collide while moving, they will merge into one pattern with a new biological term which moves up by one on the biological ladder.</p>
 +
                <h2 id="Design">Design</h2>
 +
                <p>As we know, the core of the game “2048” is adding adjacent and same numbers by moving fingers in one direction. We took the core into our design and choose 12 elements: basic group, DNA, protein, organoid, cell, tissue, organic, system, individual, population, community, ecosystem, biosphere, to replace numbers. Besides, we hoped the game interface more three-dimensional, it may have some Chinese elements to get close with users and enrich itself. When those ideas came together, we created the game——Bio2048.</p>
 +
                <p class="img-p" style="font-size:13px;"><img src="https://static.igem.org/mediawiki/igem.org/d/dc/Uestc_software-extra10.png" /><br/><B>Fig .1.</B> Overall Flow Chart </p>
 +
                <p class="img-p" style="font-size:13px;"><img src="https://static.igem.org/mediawiki/igem.org/b/b0/Uestc_software-extra11.jpeg" /><br/><B>Fig.2.</B> Game Interface Flow Chart</p>
 +
                <strong>Welcome interface</strong>
 +
                <p>When users open the game, the welcome interface will appear. You can click “skip” button to go to the main interface. Or, you can choose to wait for 3 seconds, then, the program will go to the main interface automatically.</p>
 +
                <p class="img-p" style="font-size:13px;"><img src="https://static.igem.org/mediawiki/igem.org/0/03/Uestc_software-extra12.png" /><br/><B>Fig.3.</B> Welcome Interface</p>
 +
                <strong>Main interface</strong>
 +
                <p>There are three buttons on the main interface: “PLAY”, “PATTERN”, “RULE”.</p>
 +
                <p>When you click “PLAY” button, the program will go to the game interface. </p>
 +
                <p>When you click “PATTERN” button, the program will go to the mode selection interface. </p>
 +
                <p>When you click “RULE” button, the program will go to the rules introduction interface.</p>
 +
                <p>When you click the return button which comes with the mobile phone two times in series, the program will exit.</p>
 +
                <p class="img-p" style="font-size:13px;"><img src="https://static.igem.org/mediawiki/igem.org/4/44/Uestc_software-extra13.png" /><br/><B>Fig.4.</B> Main Interface</p>
 +
                <strong>Rules introduction interface</strong>
 +
                <p>This interface introduces the specific rules of the game. As the picture shows.</p>
 +
                <p class="img-p" style="font-size:13px;"><img src="https://static.igem.org/mediawiki/igem.org/3/3f/Uestc_software-extra14.png" /><br/><B>Fig.5.</B> Rules Introduction Interface</p>
 +
                <strong>Mode selection interface</strong>
 +
                <p>Users can choose 4*4 or 5*5 board in this interface. Then, the game interface will present the selected board format.</p>
 +
                <p class="img-p" style="font-size:13px;"><img src="https://static.igem.org/mediawiki/igem.org/a/a6/Uestc_software-extra15.png" /><br/><B>Fig.6.</B> Mode Selection Interface</p>
 +
                <strong>Game interface</strong>
 +
                <p>In the board, you can slide up or down, left or right four directions to make the game go on. “SCORE” shows the scores obtained in the present. “BEST” shows the historical highest score. At the same time, you can choose learning mode to understand the biological meaning of the patterns during the game. When the game finishes, you can choose to play one more again or exit directly.</p>
 +
                <p class="img-p" style="font-size:13px;"><img src="https://static.igem.org/mediawiki/igem.org/3/34/Uestc_software-extra16.png" /><br/><B>Fig.7.</B> Game Interface</p>
 +
                <h2 id="Features">Features</h2>
 +
                <strong>Simple game operation</strong>
 +
                <p>The whole game designed for all people. All kinds of interface are introduced clearly. Everyone can easily master the game operation and obtain the overall process of the game. </p>
 +
                <strong>Original learning mode</strong>
 +
                <p>We add learning mode to the game. Using custom Toast realize the function that program could prompt words corresponding to the patterns. Users can select the any mode optionally and learn biology playing the game. </p>
 +
                <strong>Multiple design elements</strong>
 +
                <p>China red, panda and other elements integrated into the game enrich the game design. These elements not only play the role of beautification, but also increase the fun of the game.</p>
 +
                <h2 id="Future">Future</h2>
 +
                <strong>Continual popularizing and improvement</strong>
 +
                <p>After we successfully developed the Android mobile phone game, we uploaded it to application of Tencent and everyone can download to play. Also, interested people can download source code in the GitHub. Not only did we do those, but also used social media platform like QQ, Micro-blog and Wechat to do online promotion. We have got thousands of people’s attention, which means lots of people can learn more about biology by playing our game. During the process, we have gained many precious suggestions, which can help us make our game better one step at a time. </p>
 +
                <p>We’d like to continue to popularize the game in the future, and get more feedback to make improvement. </p>
 +
                <strong>Continual communication and application</strong>
 +
                <p>We applied Bio2048 to education. After working hard, we successfully contacted local schools and remedial classes to help teachers arouse the learning interest of their students. Absolutely, it is an original way to obtain knowledge. Making our game as a real educational tool in class needs more communication with teachers and practice at schools. We are sure that it is useful for students’ learning by visiting more schools.</p>
 +
                <p>Inspired by the thoughts of applying game to education, we got more ideas about EDUTAINMENT, we will go further and do better.</p>
 +
                <p>During the summer, we tried these approaches to practice our thoughts and received a good response. We hope our work can really affect the people around to pay attention to the biology. We believe our work can contribute to the learning of students through communication, test and improvement. </p>
 +
                <h2 id="References">References</h2>
 +
                <p><a href="http://blog.csdn.net/lmj623565791/article/details/40020137" style="color:#3C9CD3;" target="_blank">http://blog.csdn.net/lmj623565791/article/details/40020137</p>
 
</div>
 
</div>
<footer class="footer">
+
<footer class="footer">
 
     <div class="footer-top">
 
     <div class="footer-top">
 
         <p>FOLLOW US:
 
         <p>FOLLOW US:
             <a href="https://github.com/IGEM-UESTC-software" target="_blank"><img src="https://static.igem.org/mediawiki/igem.org/0/06/Uestc_software-github.png" /></a>
+
             <a href="https://github.com/igemsoftware2016/UESTC-Software-2016" target="_blank"><img src="https://static.igem.org/mediawiki/igem.org/0/06/Uestc_software-github.png" /></a>
 
             <a href="http://www.uestc.edu.cn/" target="_blank"><img src="https://static.igem.org/mediawiki/igem.org/a/a4/Uestc_software-school.png" /></a>
 
             <a href="http://www.uestc.edu.cn/" target="_blank"><img src="https://static.igem.org/mediawiki/igem.org/a/a4/Uestc_software-school.png" /></a>
 
             <a href="http://weibo.com/u/5621240588?refer_flag=1001030101_&is_hot=1" target="_blank"><img src="https://static.igem.org/mediawiki/igem.org/b/b1/Uestc_software-weibo.png" /></a>
 
             <a href="http://weibo.com/u/5621240588?refer_flag=1001030101_&is_hot=1" target="_blank"><img src="https://static.igem.org/mediawiki/igem.org/b/b1/Uestc_software-weibo.png" /></a>
Line 77: Line 125:
 
         <p>UESTC-SOFTWARE</p>
 
         <p>UESTC-SOFTWARE</p>
 
     </div>
 
     </div>
     <div class="footer-bottom">@ 2016 University of Electronic Science and Technology of China</div>
+
     <div class="footer-bottom">© 2016 University of Electronic Science and Technology of China</div>
 
</footer>
 
</footer>
  
<div class="scroll-top"><img class="bottom" src="https://static.igem.org/mediawiki/igem.org/1/1d/Uestc_software-up.png" /></div>
 
 
<div class="catalog">
 
<div class="catalog">
 
     <span>CATALOGUE</span>
 
     <span>CATALOGUE</span>
Line 87: Line 134:
 
     <div class="title"><img src="https://static.igem.org/mediawiki/igem.org/e/e3/Uestc_software-reduce.gif" />CATALOGUE</div>
 
     <div class="title"><img src="https://static.igem.org/mediawiki/igem.org/e/e3/Uestc_software-reduce.gif" />CATALOGUE</div>
 
     <ul>
 
     <ul>
 +
    <li>
 +
        <a href="#Description">
 +
        <span></span>
 +
        Description
 +
        </a>
 +
    </li>
 +
    <li>
 +
        <a href="#Design">
 +
        <span></span>
 +
        Design
 +
        </a>
 +
    </li>
 +
    <li>
 +
        <a href="#Features">
 +
        <span></span>
 +
        Features
 +
        </a>
 +
    </li>
 +
    <li>
 +
        <a href="#Future">
 +
        <span></span>
 +
        Future
 +
        </a>
 +
    </li>
 +
    <li>
 +
        <a href="#References">
 +
        <span></span>
 +
        References
 +
        </a>
 +
    </li>
 
     </ul>
 
     </ul>
 
</div>
 
</div>
 +
<div class="scroll-top"><img class="bottom" src="https://static.igem.org/mediawiki/igem.org/1/1d/Uestc_software-up.png" /></div>
 
<script type="text/javascript" src="https://2016.igem.org/Team:UESTC-software/js/basic/jquery?action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="https://2016.igem.org/Team:UESTC-software/js/basic/jquery?action=raw&ctype=text/javascript"></script>
<script type="text/javascript" src="https://2016.igem.org/Team:UESTC-software/js/basic/threeLevel?action=raw&ctype=text/javascript"></script>
+
<script type="text/javascript">
<script>
+
$(".scroll-top img").addClass("active");
$(document).ready(function(){
+
$(".catalog").click(function(){
     $('.content-top').eq(0).find('.title-img').eq(0).attr('src','https://static.igem.org/mediawiki/igem.org/3/3a/Uestc_software-human-practice.png');
+
    $(this).addClass("active");
 
+
    $(".catalog-area").addClass("active");
 +
});
 +
$(".catalog-area .title").click(function(){
 +
     $(".catalog-area").removeClass("active");
 +
    $(".catalog").removeClass("active");
 +
});
 +
$(".scroll-top img").click(function(){
 +
    $('html, body').animate({scrollTop:0}, 'slow');
 +
});
 +
$(window).scroll(function(){
 +
    var height = $(document).scrollTop();
 +
    if(height > 300){
 +
        $(".scroll-top img").removeClass("active");
 +
    }else{
 +
        $(".scroll-top img").addClass("active");
 +
    }
 
})
 
})
 
</script>
 
</script>
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 01:44, 20 October 2016

Extra Work: BIO2048

Extra Work

Bio2048

Description

Background

Biology and life are tightly interrelated. After investigation (For more details, please view Human Practice ), we found that huge amounts of people had little biological knowledge base. For instance, base pair, DNA, protein, organelle, cell, tissue, organ, system, individual, population, community, ecosystem, biosphere, these are important concepts in biology. The distance between ordinary people and those is so long that they nearly cannot touch it. Therefore, it’s imperative to spread the biological knowledge of the mass then to improve the quality of life.

Overview

In order to popularize biological knowledge and draw the public’s attention to biology from the basic level, UESTC-Software decided to adopt a more acceptant way to make more people be aware of the subject. We developed an Android game named Bio2048 based on the Grabriele Cirulli’s “2048”, a popular sliding block puzzle game. Instead of the numbers, the blocks are labeled with some common biological patterns, such as gene and protein. All the patterns form a biological ladder. If two patterns with the same biological terms collide while moving, they will merge into one pattern with a new biological term which moves up by one on the biological ladder.

Design

As we know, the core of the game “2048” is adding adjacent and same numbers by moving fingers in one direction. We took the core into our design and choose 12 elements: basic group, DNA, protein, organoid, cell, tissue, organic, system, individual, population, community, ecosystem, biosphere, to replace numbers. Besides, we hoped the game interface more three-dimensional, it may have some Chinese elements to get close with users and enrich itself. When those ideas came together, we created the game——Bio2048.


Fig .1. Overall Flow Chart


Fig.2. Game Interface Flow Chart

Welcome interface

When users open the game, the welcome interface will appear. You can click “skip” button to go to the main interface. Or, you can choose to wait for 3 seconds, then, the program will go to the main interface automatically.


Fig.3. Welcome Interface

Main interface

There are three buttons on the main interface: “PLAY”, “PATTERN”, “RULE”.

When you click “PLAY” button, the program will go to the game interface.

When you click “PATTERN” button, the program will go to the mode selection interface.

When you click “RULE” button, the program will go to the rules introduction interface.

When you click the return button which comes with the mobile phone two times in series, the program will exit.


Fig.4. Main Interface

Rules introduction interface

This interface introduces the specific rules of the game. As the picture shows.


Fig.5. Rules Introduction Interface

Mode selection interface

Users can choose 4*4 or 5*5 board in this interface. Then, the game interface will present the selected board format.


Fig.6. Mode Selection Interface

Game interface

In the board, you can slide up or down, left or right four directions to make the game go on. “SCORE” shows the scores obtained in the present. “BEST” shows the historical highest score. At the same time, you can choose learning mode to understand the biological meaning of the patterns during the game. When the game finishes, you can choose to play one more again or exit directly.


Fig.7. Game Interface

Features

Simple game operation

The whole game designed for all people. All kinds of interface are introduced clearly. Everyone can easily master the game operation and obtain the overall process of the game.

Original learning mode

We add learning mode to the game. Using custom Toast realize the function that program could prompt words corresponding to the patterns. Users can select the any mode optionally and learn biology playing the game.

Multiple design elements

China red, panda and other elements integrated into the game enrich the game design. These elements not only play the role of beautification, but also increase the fun of the game.

Future

Continual popularizing and improvement

After we successfully developed the Android mobile phone game, we uploaded it to application of Tencent and everyone can download to play. Also, interested people can download source code in the GitHub. Not only did we do those, but also used social media platform like QQ, Micro-blog and Wechat to do online promotion. We have got thousands of people’s attention, which means lots of people can learn more about biology by playing our game. During the process, we have gained many precious suggestions, which can help us make our game better one step at a time.

We’d like to continue to popularize the game in the future, and get more feedback to make improvement.

Continual communication and application

We applied Bio2048 to education. After working hard, we successfully contacted local schools and remedial classes to help teachers arouse the learning interest of their students. Absolutely, it is an original way to obtain knowledge. Making our game as a real educational tool in class needs more communication with teachers and practice at schools. We are sure that it is useful for students’ learning by visiting more schools.

Inspired by the thoughts of applying game to education, we got more ideas about EDUTAINMENT, we will go further and do better.

During the summer, we tried these approaches to practice our thoughts and received a good response. We hope our work can really affect the people around to pay attention to the biology. We believe our work can contribute to the learning of students through communication, test and improvement.

References

http://blog.csdn.net/lmj623565791/article/details/40020137

CATALOGUE