Difference between revisions of "Team:DLUT China B"
(剥离导航栏、加入对话气泡，改善至顶按钮，使用Font Awesome.) |
(增加气泡内容，删除项目描述。) |
||
| Line 3: | Line 3: | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
<title>2018 iGEM_DLUT_B</title> | <title>2018 iGEM_DLUT_B</title> | ||
| − | |||
<link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/style.css&action=raw&ctype=text/css"> | <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/style.css&action=raw&ctype=text/css"> | ||
<link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/nav.css&action=raw&ctype=text/css"> | <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/nav.css&action=raw&ctype=text/css"> | ||
<link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/bubbles.css&action=raw&ctype=text/css"> | <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/bubbles.css&action=raw&ctype=text/css"> | ||
| − | |||
<link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/fontawesome.css&action=raw&ctype=text/css"> | <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/css/fontawesome.css&action=raw&ctype=text/css"> | ||
| − | |||
<script src="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/js/bubbles.js&action=raw&ctype=text/javascript"></script> | <script src="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/js/bubbles.js&action=raw&ctype=text/javascript"></script> | ||
<script src="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/js/typed.js&action=raw&ctype=text/javascript"></script> | <script src="https://2018.igem.org/wiki/index.php?title=Template:DLUT_China_B/js/typed.js&action=raw&ctype=text/javascript"></script> | ||
| Line 29: | Line 26: | ||
<div> | <div> | ||
<h2 class="title" id="meetUs">Chat Bubbles</h2> | <h2 class="title" id="meetUs">Chat Bubbles</h2> | ||
| − | <div id="chatBubbles"> | + | <div id="chatBubbles"></div> |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| Line 190: | Line 67: | ||
/*开始*/ | /*开始*/ | ||
$('#start').click(function () { | $('#start').click(function () { | ||
| − | $('html,body').animate({scrollTop: $('#meetUs').offset().top-60}, 500); | + | $('html,body').animate({scrollTop: $('#meetUs').offset().top - 60}, 500); |
}); | }); | ||
/*对话气泡*/ | /*对话气泡*/ | ||
| − | + | let conversation = { | |
| − | + | ||
| − | + | ||
| − | + | ||
ice: { | ice: { | ||
| − | + | says: ["Hey, friend! Long time no see! You can click bubbles to chat with me."], | |
| − | + | reply: [ | |
| + | { | ||
| + | question: "mmm O (*￣▽￣*) O. Long time no see.", | ||
| + | answer: "ice1" | ||
| + | } | ||
| + | ] | ||
| + | }, | ||
| + | "ice1": { | ||
says: [ | says: [ | ||
| − | " | + | "We have a lot of significant updates.（Of course we cannot make it as cool as the Apple launch update)", |
| − | " | + | "As an old friend, let me open the VIP channel for you.", |
| − | + | 'Click "Skip", then you will skip the project Introduction section.', | |
| − | + | 'Click "Listen", then you will acknowledge more details about our story.' | |
| − | " | + | |
], | ], | ||
| − | |||
| − | |||
reply: [ | reply: [ | ||
{ | { | ||
| − | question: " | + | question: "Skip", |
| − | answer: " | + | answer: "dest" |
}, | }, | ||
{ | { | ||
| − | question: " | + | question: "Listen", |
| − | answer: "end" | + | answer: "listen1" |
| + | } | ||
| + | ] | ||
| + | }, | ||
| + | "dest": { | ||
| + | says: ["Please select the destination you want to go to."], | ||
| + | reply: [ | ||
| + | { | ||
| + | question: "No, thank you.", | ||
| + | answer: "end" | ||
| + | }, | ||
| + | { | ||
| + | question: "Project Introduction", | ||
| + | answer: "projectIntroduction" | ||
| + | }, | ||
| + | { | ||
| + | question: "Parts", | ||
| + | answer: "parts" | ||
| + | }, | ||
| + | { | ||
| + | question: "Model", | ||
| + | answer: "model" | ||
| + | }, | ||
| + | { | ||
| + | question: "Awards", | ||
| + | answer: "awards" | ||
| + | }, | ||
| + | { | ||
| + | question: "Human Practice", | ||
| + | answer: "humanPractice" | ||
}, | }, | ||
{ | { | ||
| − | question: " | + | question: "Teamwork and Cooperation", |
| − | answer: " | + | answer: "teamworkAndCooperation" |
} | } | ||
] | ] | ||
| − | }, | + | }, |
| − | + | "listen1":{ | |
| − | + | says:[ | |
| − | + | "Here is iGEM_DLUT_China_B.", | |
| − | says: [ | + | "I'll introduce our project for you.", |
| − | " | + | "We know that there are many diseases in the world that can be predicted and cured,", |
| − | " | + | "and to achieve that, the first step is to understand the group of people which this disease prefers.", |
| − | " | + | "For example, diabetic and hypertensive patients may suffer from chronic kidney disease.", |
| + | "Older people over the age of 60 may be suffering from Alzheimer's disease." | ||
], | ], | ||
| − | reply: [ | + | reply:[ |
{ | { | ||
| − | question: " | + | question:"And then?", |
| − | answer: " | + | answer:"listen2" |
| − | }, | + | } |
| + | ] | ||
| + | }, | ||
| + | "listen2":{ | ||
| + | says:["The second step is to have regular medical examination to intervene disease early to prevent its progression."], | ||
| + | reply:[ | ||
{ | { | ||
| − | question: " | + | question:"Yes, it makes sense, but how can that be achieved?", |
| − | answer: " | + | answer:"listen3" |
} | } | ||
] | ] | ||
}, | }, | ||
| − | + | "listen3":{ | |
| − | + | says:[ | |
| − | " | + | "You may not believe that", |
| − | says: [ | + | "we can know our physical condition through the urine.", |
| − | " | + | "Urine is regard as \"gold mine\" for the identification of disease markers." |
| − | " | + | |
| − | " | + | |
], | ], | ||
| − | reply: [ | + | reply:[ |
{ | { | ||
| − | question: " | + | question:"Is that true?", |
| − | answer: " | + | answer:"listen4" |
} | } | ||
] | ] | ||
}, | }, | ||
| − | + | "listen4":{ | |
| − | + | says:[ | |
| − | " | + | "Absolutely, it's like a mirror that reflects one's health.", |
| + | "In the early stages of the disease, we can use the protein markers in the urine to screen the disease." | ||
| + | ], | ||
| + | reply:[ | ||
| + | { | ||
| + | question:"But how do you test it?", | ||
| + | answer:"listen5" | ||
| + | } | ||
| + | ] | ||
| + | }, | ||
| + | "listen5":{ | ||
| + | says:["To be honest, we use a very tiny nano-antibody, and liquid crystal sensor to show reaction results for us."], | ||
| + | reply:[ | ||
| + | { | ||
| + | question:"Liquid crystal? How?", | ||
| + | answer:"listen6" | ||
| + | } | ||
| + | ] | ||
| + | }, | ||
| + | "listen6":{ | ||
| + | says:[ | ||
| + | "In our daily life, we usually see the LCD screen is black. However, it becomes colorful as it works.", | ||
| + | "Our products are similar in principle.", | ||
| + | "The combination of the nano-antibody and the protein in the urine resulted in a slight change in the liquid crystalline substrate.", | ||
| + | "Changes in the brightness and color of the liquid crystal film,", | ||
| + | "so the liquid crystal brightness can directly reflect the antigen concentration." | ||
| + | ], | ||
| + | reply:[ | ||
| + | { | ||
| + | question:"That means we can see directly how we are physically in the state.", | ||
| + | answer:"listen7" | ||
| + | } | ||
| + | ] | ||
| + | }, | ||
| + | "listen7":{ | ||
| + | says:[ | ||
| + | "Yes, but we need to do a more accurate quantitative analysis.", | ||
| + | "We take photos, and then grayscale processing and analysis of the average gray value.", | ||
| + | "This can correspond to the concentration-gray curve that we have reached, thus we can accurately obtain the content of the marker." | ||
| + | ], | ||
| + | reply:[ | ||
| + | { | ||
| + | question:"You did something amazing!", | ||
| + | answer:"last" | ||
| + | } | ||
| + | ] | ||
| + | }, | ||
| + | "last":{ | ||
says: [ | says: [ | ||
| − | " | + | "Summary has ended, the following is for each plate specific content.", |
| − | + | "Please select the destination you want to go to." | |
| − | " | + | |
| − | + | ||
], | ], | ||
reply: [ | reply: [ | ||
{ | { | ||
| − | question: " | + | question: "No, thank you.", |
| − | answer: " | + | answer: "end" |
}, | }, | ||
{ | { | ||
| − | question: " | + | question: "Project Introduction", |
| − | answer: " | + | answer: "projectIntroduction" |
}, | }, | ||
{ | { | ||
| − | question: " | + | question: "Parts", |
| − | answer: " | + | answer: "parts" |
| + | }, | ||
| + | { | ||
| + | question: "Model", | ||
| + | answer: "model" | ||
| + | }, | ||
| + | { | ||
| + | question: "Awards", | ||
| + | answer: "awards" | ||
| + | }, | ||
| + | { | ||
| + | question: "Human Practice", | ||
| + | answer: "humanPractice" | ||
| + | }, | ||
| + | { | ||
| + | question: "Teamwork and Cooperation", | ||
| + | answer: "teamworkAndCooperation" | ||
} | } | ||
] | ] | ||
}, | }, | ||
| − | " | + | "projectIntroduction":{ |
| − | says: [ | + | says:[ |
| − | " | + | "Wow, you chose the project as the destination.", |
| − | " | + | "Are you ready to go?" |
| − | + | ||
], | ], | ||
| − | reply: [ | + | reply:[ |
{ | { | ||
| − | question: " | + | question:"Yes.", |
| − | answer: " | + | answer:"goProjectIntroduction" |
}, | }, | ||
{ | { | ||
| − | question: " | + | question:"Wait a second.", |
| − | answer: " | + | answer:"dest" |
} | } | ||
] | ] | ||
}, | }, | ||
| − | + | "parts":{ | |
| − | + | says:[ | |
| − | " | + | "Didi, you are about to reach parts.", |
| − | + | "You will learn about the main components we use such as messages." | |
| − | says: [ | + | |
| − | " | + | |
], | ], | ||
| − | reply: [ | + | reply:[ |
{ | { | ||
| − | question: "OK, | + | question:"OK, let`s go.", |
| − | answer: " | + | answer:"goParts" |
| + | }, | ||
| + | { | ||
| + | question:"Wait a second.", | ||
| + | answer:"dest" | ||
} | } | ||
] | ] | ||
}, | }, | ||
| − | + | "model":{ | |
| − | + | says:[ | |
| − | " | + | "Do you make the model as your destination?", |
| − | says: [ | + | "Project optimization and results will be exhibited here." |
| − | " | + | |
| − | " | + | |
], | ], | ||
| − | reply: [ | + | reply:[ |
{ | { | ||
| − | question: " | + | question:"Go and visit.", |
| − | answer: " | + | answer:"goModel" |
}, | }, | ||
{ | { | ||
| − | question: " | + | question:"I want a different destination.", |
| − | answer: " | + | answer:"dest" |
} | } | ||
] | ] | ||
}, | }, | ||
| − | " | + | "awards":{ |
| − | says: [ | + | says:[ |
| − | " | + | "You will find the treasures of application designing at the awards office." |
| − | + | ||
| − | + | ||
], | ], | ||
| − | reply: [ | + | reply:[ |
{ | { | ||
| − | question: " | + | question:"Departure. (￣) ￣) ↗", |
| − | answer: " | + | answer:"goAwards" |
}, | }, | ||
{ | { | ||
| − | question: " | + | question:"I`m not interested in treasure hunt.", |
| − | answer: " | + | answer:"dest" |
| + | } | ||
| + | ] | ||
| + | }, | ||
| + | "humanPractice":{ | ||
| + | says:[ | ||
| + | "We are committed to education and publicity.", | ||
| + | "Choose \"Learn more\" and will arrive at the human practice.", | ||
| + | "Choose \"Back\", you can re-select the destination." | ||
| + | ], | ||
| + | reply:[ | ||
| + | { | ||
| + | question:"Learn more", | ||
| + | answer:"goHumanPractice" | ||
| + | }, | ||
| + | { | ||
| + | question:"Back", | ||
| + | answer:"dest" | ||
| + | } | ||
| + | ] | ||
| + | }, | ||
| + | "teamworkAndCooperation":{ | ||
| + | says:[ | ||
| + | "Choose \"Learn more\" will lead to team introduction,", | ||
| + | "and learn about team members and collaboration between teams.", | ||
| + | "Choose \"Back\", you can re-select the destination." | ||
| + | ], | ||
| + | reply:[ | ||
| + | { | ||
| + | question:"Learn more", | ||
| + | answer:"goTeamworkAndCooperation" | ||
| + | }, | ||
| + | { | ||
| + | question:"Back", | ||
| + | answer:"dest" | ||
} | } | ||
] | ] | ||
| Line 352: | Line 355: | ||
says: [ | says: [ | ||
"Thanks for your time and attention.", | "Thanks for your time and attention.", | ||
| − | "The chat is over, but you can | + | "The chat is over, but you can start over to go through other options." |
], | ], | ||
reply: [ | reply: [ | ||
{ | { | ||
| − | question: "Start over | + | question: "Start over", |
answer: "ice" | answer: "ice" | ||
} | } | ||
] | ] | ||
} | } | ||
| − | }; | + | }; |
| − | + | goProjectIntroduction=function(){ | |
| − | + | window.location.href="Description.html"; | |
| − | + | }; | |
| − | + | goParts=function(){ | |
| − | " | + | window.location.href="PartsOverview.html"; |
| − | + | }; | |
| + | goModel=function(){ | ||
| + | window.location.href="ConditionOptimization.html"; | ||
| + | }; | ||
| + | goAwards=function(){ | ||
| + | window.location.href="AppliedDesign.html"; | ||
| + | }; | ||
| + | goHumanPractice=function(){ | ||
| + | console.log('aa'); | ||
| + | window.location.href="HumanPractice.html"; | ||
| + | }; | ||
| + | goTeamworkAndCooperation=function(){ | ||
| + | window.location.href="TeamMembers.html"; | ||
| + | }; | ||
| − | + | function isShow($el){ | |
| − | + | let winH = $(window).height(),/*获取窗口高度*/ | |
| − | + | scrollH = $(window).scrollTop(),/*获取窗口滚动高度*/ | |
| − | + | top = $el.offsetTop;/*获取元素距离窗口顶部偏移高度*/ | |
| − | + | return top < scrollH + winH; | |
| − | + | } | |
| − | + | let chatWindow; | |
| − | + | document.onscroll=function () { | |
| − | + | if(document.getElementById("chat")==null&&isShow(document.getElementById("chatBubbles"))) | |
| − | + | { | |
| − | + | let chat=document.createElement("div"); | |
| − | + | chat.setAttribute("id","chat"); | |
| − | + | document.getElementById("chatBubbles").appendChild(chat); | |
| − | + | chatWindow = new Bubbles(document.getElementById("chat"), "chatWindow"); | |
| − | + | chatWindow.talk(conversation); | |
| − | + | } | |
| − | " | + | |
| − | + | ||
| − | + | ||
}; | }; | ||
</script> | </script> | ||
Revision as of 13:09, 18 September 2018
Chat Bubbles
Address
No.2 Linggong Road, Ganjingzi District, Dalian City, Liaoning Province, P.R.C., 116024
Follow Us
