Science Buddies: "Ask an Expert"

Posted: **Wed Jul 08, 2015 1:37 am**

Hello. I am an Australian 6th grade boy.

For my science fair project, I have decided to make a website (HTML) which determines what a child of two parents will be like, and how accurately it determines it. A similar concept can be found at http://bit.ly/1LW15Cp. I however, want to have the child (determined by statistics and models) to be displayed as an image, similar to an avatar on a multiplayer video-game, along with a margin of error being displayed. I would like to see some pointers on programming this website. I already have my genetic data and models.

-Sidhu

Posted: **Wed Jul 08, 2015 6:54 am**

That could be a very ambitious project if you haven't done web development before. The genetics can just be the essentials out of your text book but to make the web page dynamic and interactive will require you to dig in and learn a lot. You'll enjoy the ride though.

To start with, you don't program in HTML. HTML is a presentation language which tells the browser what your page *looks like*. To make it do things you need to actually write programs in some programming language. There are many options these days. The old school option is to use Javascript which runs directly in the browser and can do some pretty powerful things. The code runs in the user's browser. A second option is to use a scripted web page where the code runs on the server. These are often written in PHP (on a Linux server) or ASP (on a Windows-based server). Then things get complicated.

I'll assume for the moment that you want to run everything in the browser and can do your project in Javascript. The basic technology that allows a web page to change the way it looks is AJAX. You can look that up in a search engine and find all sorts of tutorials on how to use it. The programming language Javascript has a lot of the same look and feel of C so it's pretty easy to figure out. You can also find a lot of good tutorials online for Javascript.

In the simple case where you want to determine if a child is a boy or a girl, it depends on the X or Y chromosome the child gets from the father. Here's a simple web page using only Javascript that shows two ways of changing an image based on user input or some other calculation. Imagine that instead of having the user pick something, the program looked at some other data and then determined the result itself.

Code: Select all

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="dcterms.created" content="Wed, 08 Jul 2015 13:07:17 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title></title>
	
    <style type="text/css">
    <!--
    body {
      color:#000000;
      background-color:#FFFFFF;
      background-image:url('Background Image');
      background-repeat:no-repeat;
    }
    a  { color:#0000FF; }
    a:visited { color:#800080; }
    a:hover { color:#008000; }
    a:active { color:#FF0000; }
    -->
    </style>
    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
	<script>
	function changepic() {
      var x = document.getElementById("ChromosomeFromDad").value;
	  if (0 == x) child2.src='https://cdnd.icons8.com/wp-content/uploads/2014/10/children.png'
	  if (1 == x) child2.src='https://cdnd.icons8.com/wp-content/uploads/2014/10/girl.png'
	  if (2 == x) child2.src='https://cdnd.icons8.com/wp-content/uploads/2014/10/boy.png'
	}
	</script>
  </head>
  <body>
  <i>This is one way you could make an image change based on input</i><p>
  Is the child a <a onclick="child.src='https://cdnd.icons8.com/wp-content/uploads/2014/10/boy.png';">BOY</a>
  or a <a onclick="child.src='https://cdnd.icons8.com/wp-content/uploads/2014/10/girl.png';">GIRL</a>?<p>
<img name="child" src="https://cdnd.icons8.com/wp-content/uploads/2014/10/children.png" alt="" title="" />
<hr>
<i>This is another way, using Javascript functions</i><p>
Chromosome from mom? 
<select id="ChromosomeFromMom">
  <option selected value="1">X</option>
</select> and the chromosome from dad? 
<select id="ChromosomeFromDad" onchange="changepic();">
  <option selected value="0">?</option>
  <option value="1">X</option>
  <option value="2">Y</option>
</select>
<img name="child2" src="https://cdnd.icons8.com/wp-content/uploads/2014/10/children.png" alt="" title="" />
  </body>
</html>

This example uses pictures I just happened to find on the web so if they don't display, then the owner removed them. You'll get the idea anyway.

So using your existing data and models, you can write up your program using Javascript and then use AJAX methods to display the results in an interactive way. If you run into something that Javascript can't do and have access to running scripts on the server, you'll find that PHP and ASP can do pretty much anything. Then there's Java (of which I'm not a fan) and Flash and other stuff. Someone else here can speak to that if they'd care to.

Good luck with the project. It sounds fun and you'll learn all sorts of really useful skills in the process.

Howard

Posted: **Thu Jul 30, 2015 4:42 am**

Thanks for the help!

I guess I did stuff up in the way I used the term "HTML".

I have made simple webpages before, but you're right in the sense that this is quite ambitious.

I had already decided to base the gender on the subcontinent that the parents live in (or where conceivement took place), as it is proven that places where the climate (i.e. income, infrastucture, pollution, etc.) is better gives more males, and vice verca.

With my data, I meant things like hair colour, eye colour, etc.

Again, thank you.

Posted: **Thu Jul 30, 2015 5:10 am**

Hello again. Something that I forgot to mention is that I also need help in a rather specific part of my "thing".
I want to determine the skin colour of the child. I know that this can only be determined by the amount of melanin, and there isn't a way that I can think of that can show what the child's skin colour will be like. I thought about using a light/dark scale of 1-6 for the parents, based on this image:

,to decide, but I am not sure on how to do this. Is there ay way in which you can help?

Posted: **Thu Jul 30, 2015 7:18 am**

I can offer you a suggestion about displaying the result, but I'm assuming you have a method of deciding the child's skin color from 1-6?

Once you've decided what skin tone you're going to show as a result, you'll want to make up 6 images which each in a different shade. You might also consider having the boy and girl images tinted in those colors - so you end up with 6 boys and 6 girls. Then when your algorithm picks skin tone 2 for a girl, you'd display image 'Girl2.png' or whatever you've named the images. I think getting the different colors to display is less tricky than perhaps deciding what skin tone is most likely.

Posted: **Sat Aug 01, 2015 4:17 am**

Okay.
So JS would be fine, right?

Posted: **Sat Aug 01, 2015 6:27 am**

I don't see any reason why you can't use JavaScript and AJAX techniques to display the images. You make your selection using JavaScript code and then simply have it choose the image.

Posted: **Sat Aug 01, 2015 6:42 pm**

Okay.
Advance CSS knowledge is not absolutely required, right? I only have limited CSS knowledge, but I am trying to learn it anyways.

Posted: **Sat Aug 01, 2015 7:10 pm**

I think you could do this entirely without any CSS but a little might help it look nicer on screen.

When in doubt, use Google or your favorite and search for what you're trying to do. Chances are that someone has already done it and has shared the HTML, JavaScript or CSS code.

Posted: **Sat Aug 22, 2015 7:46 pm**

Hello again!

I've spent the last few weeks trying to learn the JavaScript required for my project. Oh yeah, when I said CSS, that was a mistake. I knew CSS, but it was JS that I wasn't good with (this is what happens when I stay up till 1am).

So I now get how to use JS (like 75%) using tutorials from places like W3Schools and CodeCademy, but I still don't understand exactly how to make the <select>...</select> to work properly. I looked at your code, and I kind of get the premise, but not really. Could you maybe explain it to me or point me to a place that can do so? Thanks!

Posted: **Sun Aug 23, 2015 1:31 pm**

Sure. The <select> tag defines a list of item that appear in a dropdown menu. You give it name with the 'id' tag. When you make a selection, that id's value becomes whatever you set the value to. In the example below, the id of the selection is called "car". If you click on the button, a list of the 4 car types appears. You select one and 'car.value' becomes whatever was set by that option's value= statement. Of you picked "Opel", the statement 'value="opel" is executed so that car.value becomes "opel".

<select id="car">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

You can also set a line of JS to execute when the select is used.

<select id="car" onchange="alert(car.value)">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

That simple change causes a dialog box to pop up when you make the selection. It's handy for debugging. Take a look at http://www.w3schools.com/tags/tag_select.asp or http://www.littlewebhut.com/html/select_tag . What is it that you're trying to do that you can't get working? Can you post a little piece of your code that you need help with? Don't post the whole thing, just the part with the <select> and explain what you want it to do.

Howard

Posted: **Mon Aug 24, 2015 1:47 am**

Well I kind of figured out how to use <select>...</select> after I posted that. Now everything that I wanted to do works perfectly! Thank you very very much for your help.

Also, in case you are curious, the source code for the hair portion of the site:

Code: Select all

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hair</title>
        <script>
            function changepic() {
                var x = document.getElementById("HairColorFromMum").value;
                var y = document.getElementById("HairColorFromDad").value;
                if (x == 0 || y == 0){
                        childHair.src='http://vignette3.wikia.nocookie.net/spore/images/6/6c/Question-mark.png/revision/latest?cb=20110427230528'
                    }
                else if (x == 1 && y == 1)    { 
                        childHair.src='images/BlackHair.png'
                    }
                else if (x == 1 && y == 2)    {
                        childHair.src='images/BrownHair.png'
                    }
                else if (x == 1 && y == 3)    {
                        childHair.src="images/BrownHair.png"
                    }
                else if (x == 1 && y == 4)    {
                        childHair.src="images/BrownHair.png"
                    }
                else if (x == 1 && y == 5)    {
                        childHair.src="images/BrownHair.png"
                    }
                else if (x == 2 && y == 1)    {
                        childHair.src="images/BlackHair.png"
                    }
                else if (x == 2 && y == 2)    {
                        childHair.src="images/BrownHair.png"
                    }
                else if (x == 2 && y == 3)    {
                        childHair.src="images/BrownHair.png"
                    }
                else if (x == 2 && y == 4)    {
                        childHair.src="images/BrownHair.png"
                    }
                else if (x == 2 && y == 5)    {
                        childHair.src="images/BrownHair.png"
                    }
                else if (x == 3 && y == 1)    {
                        childHair.src="images/BrownHair.png"
                    }
                else if (x == 3 && y == 2)    {
                        childHair.src="images/BrownHair.png"
                    }
                else if (x == 3 && y == 3)    {
                        childHair.src="images/RedHair.png"
                    }
                else if (x == 3 && y == 4)    {
                        childHair.src="images/RedStrawberryBlondHair.png"
                    }
                else if (x == 3 && y == 5)    {
                        childHair.src="images/StrawberryBlondHair.png"
                    }
                else if (x == 4 && y == 1)    {
                    childHair.src="images/BrownHair.png"
                }
                else if (x == 4 && y == 2)    {
                    childHair.src="images/BrownHair.png"
                }
                else if (x == 4 && y == 3)    {
                    childHair.src="images/RedStrawberryBlondHair.png"
                }
                else if (x == 4 && y == 4)    {
                    childHair.src="images/StrawberryBlondHair.png"
                }
                else if (x == 4 && y == 5)    {
                    childHair.src="images/StrawberryBlondBlondHair.png"
                }
                else if (x == 5 && y == 1)    {
                    childHair.src="images/BrownHair.png"
                }
                else if (x == 5 && y == 2)    {
                    childHair.src="images/BrownHair.png"
                }
                else if (x == 5 && y == 3)    {
                    childHair.src="images/StrawberryBlondHair.png"
                }
                else if (x == 5 && y == 4)    {
                    childHair.src="images/StrawberryBlondBlondHair.png"
                }
                else    {
                    childHair.src="images/BlondHair.png"
                }
                };
        </script>
    </head>
    <body>
        <span>Hair Color from mom?</span>
        <select id="HairColorFromMum" onchange="changepic();">
            <option selected="" value="0">?</option>
            <option selected="" value="1">Black</option>
            <option selected="" value="2">Brown</option>
            <option selected="" value="3">Red</option>
            <option selected="" value="4">Strawberry Blond</option>
            <option selected="" value="5">Blond</option>
        </select>
        <span> and the Hair Color from dad? </span>
        <select id="HairColorFromDad" onchange="changepic();">
            <option selected="" value="0">?</option>
            <option value="1">Black</option>
            <option value="2">Brown</option>
            <option value="3">Red</option>
            <option value="4">Strawberry Blond</option>
            <option value="5">Blond</option>
        </select>
        <img name="childHair" src="http://vignette3.wikia.nocookie.net/spore/images/6/6c/Question-mark.png/revision/latest?cb=20110427230528" height="40px" width="80px">
    </body>
</html>

The images won't load because I can't give you the images (they are .png), but I hope that you get the idea.

Again, thank you very much for helping with my project.

Posted: **Fri Nov 13, 2015 1:40 am**

I need help on html this is my first time trying it. I chose the "Teach the Computer How to Play Tic-Tac-Toe and I suck.
This is due about 1-2 weeks from now. I am having trouble understanding it so can someone help me with this. so if someone sees this and replies thank you so much.

Posted: **Mon Nov 16, 2015 11:14 am**

Ethan - an expert here in the forums pasted your thread into a new topic. Please visit: viewtopic.php?f=27&t=15106

Science Buddies: "Ask an Expert"

Programming in HTML

Programming in HTML

Re: Programming in HTML

Re: Programming in HTML

Re: Programming in HTML

Re: Programming in HTML

Re: Programming in HTML

Re: Programming in HTML

Re: Programming in HTML

Re: Programming in HTML

Re: Programming in HTML

Re: Programming in HTML

Re: Programming in HTML

Re: Programming in HTML

Re: Programming in HTML