|
|
Line 187: |
Line 187: |
| } | | } |
| </style> | | </style> |
− |
| |
| <body> | | <body> |
| <div class="wrapper"> | | <div class="wrapper"> |
− | | + | |
| <!-- MAIN--> | | <!-- MAIN--> |
| + | <div id="main" class="cf"> |
| + | <div class="headline"> |
| + | HUMAN PRACTICE —— PUBLIC ENGAGEMENT |
| + | </div> |
| + | <!-- posts list --> |
| + | <div id="posts-list" class="cf"> |
| + | <article class="cf"> |
| + | <div class="entry-title" id="College"> |
| + | <div class="post-heading" >Met Journey —— A VR game</div> |
| + | </div> |
| + | <div class="subtitle" id="VRintro">VR game introduction</div> |
| + | <div> |
| + | <div class="excerpt" width="80%"> |
| + | "Met Journey" is a virtual realistic game on Android platform built by Unity3D, focusing on common metabolic pathways. As the player, you can choose the original fuel and start your journey within our metabolic systems. |
| + | <img src="https://static.igem.org/mediawiki/2018/7/7c/T--SJTU-software--VRgame.jpg" align="right" width="20%" height="auto"/> |
| + | </div> |
| + | </div> |
| + | |
| + | |
| + | <div class="excerpt"> |
| + | |
| + | This game is basically a maze and mainly contains five parts: glycolysis, the citric acid cycle, fatty acid metabolism, biosynthesis of steroid and urea cycle. You can choose different path at nodes(middle metabolites) by clicking on different walls, where the requirement of each path will be shown. The wall will turn red if you don't meet the requirement. |
| + | ATP is the "currency" in the game and will decline as time goes by. The game fails when ATP drops to zero, so try to make the right choice and survive. It can also be used to exchange some important middle metabolites. You can always check the remaining time as well as your current major metabolite in the top left corner of your version while the repository sysmtem is in the top right corner. |
| + | We provide both Engish and Chinese version of this game. |
| + | </div> |
| | | |
− | <div id="main" class="cf">
| + | <div class="subtitle" id="VRpop">VR game popularization</div> |
− | <div class="headline">
| + | <div class="excerpt"> |
− | Project —— Document
| + | On Sept. 16th, we came to Youth Center of Minhang District with our ‘Met Journey’, to introduce metabolism and synthetic biology. First, we explained about the metabolic system in the human body to them, leading them to recognize the importance of metabolism. Then we introduced our game, ‘Met Journey’ and taught them to play the game. They were all very interested with the game. At first, they were not so familiar with the system, so they failed once and again. As they became more familiar, they could complete the system, and had fun in the process of exploring. With the fun of playing the game, they realized the complexity of metabolic system. Then we introduced synthetic biology to them, explaining the close relationship between synthetic biology and our daily life. We were all proud to see their interests in synthetic biology were aroused. |
− | </div>
| + | </div> |
− | <!-- posts list -->
| + | </article> |
− | <div id="posts-list" class="cf">
| + | |
− |
| + | <article class="cf"> |
− | <article class="cf">
| + | |
− | <div class="entry-title"> | + | <div class="entry-title"> |
− | <div class="post-heading" id="MET">MET differ</div>
| + | <div class="meta">April 7 2018</div> |
− | </div>
| + | <div class="post-heading" >2018 SJTUer’s Festival——Popularization of Biology</div> |
− | <div class="excerpt">
| + | </div> |
− | We design a data format, .met format, to simply describe a metabolic network. .met format is easy to read and write. <br/>If a line starts with ‘##’, this line indicates a new subgraph. Follows the ‘##’ is the name of the subgraph. And the next lines are this subgraph.<br/>If a line starts with ‘#’, this line is a metabolite. In this line, there should be metabolite ID, name and other information like SMILES.<br/>If a line starts without any symbol, it indicates a reaction. Reaction ID, reactors and products should be included. And if exists, enzyme information should be included as well.
| + | <div class="excerpt"> |
| + | SJTUer’s festival is an annual Youth creative carnival in Shanghai Jiao Tong University. In 2018 SJTUer’s festival, we set up a booth in section of Science and technology to provide public with scientific biology knowledge and promoting their scientific literacy. |
| + | </div> |
| + | <div class="subtitle" id="Microscopic">Microscopic observation</div> |
| + | <div class="excerpt"> |
| + | We demonstrated the public how to use a microscope and stereoscope. From Moss slice,blood cell to petal, ant…… Everyone have enjoyed the wonder of microworld. Especially, the activity attracted many children and stimulated them the exploration of the biological world! |
| + | </div> |
| + | <div class="feature-image"> |
| + | <img src="https://raw.githubusercontent.com/sjtusoftware2018/2018iGEM_wiki/master/images/HP/microscope.jpg" alt="Thumbnail" /> |
| + | </div> |
| + | |
| + | <div class="subtitle" id="DNA">DNA DIY workshop</div> |
| + | <div class="excerpt"> |
| + | We also provided public a chance to build DNA models with their own hands. In this DIY process, everyone not only feel the sense of accomplishment of building a model by hand, but also increased the knowledge. They were impressed with the structure of double stranded DNA and understood the mysteries of molecular biology. |
| + | </div> |
| + | |
| + | <div class="feature-image"> |
| + | <img src="https://raw.githubusercontent.com/sjtusoftware2018/2018iGEM_wiki/master/images/HP/DNA.jpg" alt="Thumbnail" /> |
| + | </div> |
| + | <div class="subtitle" id="synthetic">Introduction to synthetic biology</div> |
| + | <div class="excerpt"> |
| + | We gave a brief introduction of synthetic biology to public, then we encouraged them write down their hope for the future development of synthetic biology. Someone wrote” I hope synthetic biology can help cure for cancer in the future.” Another wrote” I hope synthetic biology can play a role in promoting plant growth and raising the yield of crops.’’…… We were greatly inspired by these public opinions. |
| + | </div> |
| + | <div class="feature-image"> |
| + | <img src="https://raw.githubusercontent.com/sjtusoftware2018/2018iGEM_wiki/master/images/HP/Introduction.jpg" alt="Thumbnail" /> |
| + | </div> |
| + | </article> |
| | | |
− | </div> | + | <article class="cf"> |
− | <div class="excerpt">
| + | |
− | With the development of synthetic biology, more and more computational methods were applied to reduce the researchers’ workload. The Systems Biology Markup Language (SBML), which is a free and open interchange format for computer models, is widely used. The abilities to compare different SBML models of different situations and different versions of the same model are both important. Many other engineering disciplines rely a great extent on version control to track designs that are produced at each stage of the iterative design cycle. This is often accompanied by using the File Differences tool to compare different versions directly and determine the changes. However, it is not satisfactory when comparing two models of the SBML format as text directly. Because it is difficult to find the significant features in its output. What’s more, many textual changes are not significant (e.g., changes in whitespace or the ordering of elements), and if the ID of a species is changed, this change will occur in many places and has a large impact.
| + | <div class="entry-title" id="Camp"> |
− | </div>
| + | <div class="meta">July 2018</div> |
− |
| + | <div class="post-heading" >Science summer camp </div> |
− | <div class="excerpt"> | + | </div> |
− | We propose model-diff, a tool that can read two or more metabolic network models in SBML format and generate images to show the differences. The default view depicts the metabolites as an ellipse and the reaction as a rectangle. By default, elements in both models will be treated as the same entity if they have the same id attribute. Shading is used to indicate whether each node and edge are shared by two models (gray), a single model rather than two models (red or blue). The dotted node edge indicates that the component is shared between models but its properties are different: a rectangle with a dashed border indicates that not all models have the same kinetic law response; an ellipse with a dashed double border indicates that not all models have the same is boundary property.
| + | |
− | </div>
| + | <div class="excerpt"> |
| + | During the summer vacation, we took advantage of the experiment center for life-science teaching and conducted a series of basic experiments facing to the middle school students nationwide. These experiments including the identification of GM foods were aimed at giving students a better understanding of genes and life science. We hope we could intrigue their interest in life science and make them be devoted in synthetic biology in the near feature. |
| + | </div> |
| + | |
| + | <div class="feature-image"> |
| + | <img src="https://static.igem.org/mediawiki/2018/5/56/T--SJTU-software--camp.jpg" alt="Thumbnail" /> |
| + | </div> |
| + | |
| + | </article> |
| | | |
− | <div class="excerpt"> | + | |
− | Models-diff reads the metabolic models in SBML format and produces the output in DOT format, which can be converted to an image using GraphViz or other compatible software. It can be used as a python package, as a standalone command line tool, or through a form on our website.
| + | <article class="cf"> |
− | </div> | + | |
| + | <div class="entry-title" id="College"> |
| + | <div class="meta">October 10 2018</div> |
| + | <div class="post-heading" > College Open Day——Poster Presentation </div> |
| + | </div> |
| + | <div class="feature-image"> |
| + | <img src="https://raw.githubusercontent.com/sjtusoftware2018/2018iGEM_wiki/master/images/HP/College1.jpg" alt="Thumbnail" /> |
| + | </div> |
| + | |
| + | <div class="excerpt"> |
| + | In desire of raising more students and faculty’s awareness of synthetic biology and IGEM, our team elaborately prepared a presentation on October 10th, the college open day. We introduced the iGEM competition, 2017&2018’s projects of our team, as well as the status quo and prospect of synthetic biology to the freshmen in SJTU. They showed great interest in iGEM and the projects we did, and some of them even showed willingness to join us someday. |
| + | </div> |
| + | |
| + | <div class="feature-image"> |
| + | <img src="https://raw.githubusercontent.com/sjtusoftware2018/2018iGEM_wiki/master/images/HP/College2.jpg" alt="Thumbnail" /> |
| + | </div> |
| + | |
| + | </article> |
| + | |
| + | </div> |
| + | <!-- ENDS post list --> |
| + | |
| + | <!-- SIDEBAR --> |
| + | <aside id="sidebar"> |
| + | |
| + | <ul> |
| + | <li class="block"> |
| + | <h4 class="heading" align="center">Met Journey</h4> |
| + | <ul> |
| + | <li class="cat-item"><a href="#VRintro" >VR game introduction</a></li> |
| + | <li class="cat-item"><a href="#VRpop" >VR game popularization</a></li> |
| + | </ul> |
| + | </li> |
| + | <li class="block"> |
| + | <h4 class="heading" align="center">Popularization</h4> |
| + | <ul> |
| + | <li class="cat-item"><a href="#Microscopic" >Microscopic observation</a></li> |
| + | <li class="cat-item"><a href="#DNA" >DNA DIY workshop</a></li> |
| + | <li class="cat-item"><a href="#synthetic" >Introduction to synthetic biology</a></li> |
| + | </ul> |
| + | </li> |
| | | |
− | <div class="excerpt">
| + | <li class="block"> |
− | SMILES (Simplified molecular input line entry specification) is a specification that explicitly describes the molecular structure in ASCII strings. Smiles-differ provides two functions of smiles alignment and visualization. Users need to provide two molecules of SMILES to be compared. The software classifies the similarity of two molecules based on molecular structure. In theory, the lowest score is 0 and the highest score is 1 point. At the same time, the user can enter SMILE to preview the molecules to be compared.
| + | <h4 class="heading" align="center">Science camp</h4> |
− | </div>
| + | <ul> |
| + | <li class="cat-item"><a href="#Camp">Basic experiment instruction</a></li> |
| + | </ul> |
| + | |
| + | </li> |
| | | |
− | <div class="excerpt">
| + | <li class="block"> |
− | DNA Editor is an everyday lab tool for handling sequences, it has many functions that can be used by researchers very conveniently. The basic function is that it can do basic DNA/RNA operations, such as reverse-Complement DNA, remove non-IUPAC letters and change upper/lower case. Also, it can show the basic information of the sequence. Restriction sites module has a function to find restriction sites, select them and highlight the selected in sequence so that users can find out the locations of restriction sites. Digest module can draws graphic maps. Draw restriction maps with or without features for linear a circular sequences. Besides, it can visualize a digest as gel picture. Simulate band intensity or draw all bands black. Translate module can translates DNA sequences in one, three or six frames and show out the peptide sequence features module can handles GenBank features. Use features to annotate regions in the DNA. DNA Editor gives you full control. All calculation happens on your machine. You can load and save sequences in FASTA or GenBank format. Pictures can be saved as html or SVG format.
| + | <h4 class="heading" align="center">College Open Day</h4> |
− | </div>
| + | |
− | | + | |
− | </article>
| + | |
− | | + | |
− |
| + | |
− | <!-- SIDEBAR -->
| + | |
− | <aside id="sidebar" >
| + | |
− |
| + | |
− | <ul>
| + | |
− | <li class="block">
| + | |
− | <h4 class="heading" align="center">Description</h4> | + | |
| <ul> | | <ul> |
− | <li class="cat-item"><a href="#Background" >BACKGROUND</a></li> | + | <li class="cat-item"><a href="#College">Poster Presentationn</a></li> |
− | <li class="cat-item"><a href="#What" >WHAT IS METLAB?</a></li>
| + | </ul> |
− | <li class="cat-item"><a href="#How" >HOW TO USE IT?</a></li>
| + | |
− | </ul> | + | </li> |
− | </li>
| + | </ul> |
− | </ul>
| + | |
− | </aside>
| + | </aside> |
− | <!-- ENDS SIDEBAR -->
| + | <!-- ENDS SIDEBAR --> |
− | </div> | + | |
| + | </div> |
| + | |
| <!-- ENDS MAIN --> | | <!-- ENDS MAIN --> |
− |
| |
| | | |
| </body> | | </body> |