<div id="myDiv" class="alert alert-info">Hello World</div>

Frog uses most of the Bootstrap CSS styling, so setting the DIV's class to be alert and alert-info gives us a nice blue box.
 

Bootstrap CSS

We're still not doing anything with the contents of the DIV though.   We've added an ID to the DIV to make it easier to find for the next step.
 

Step 5

Re-edit the page and open the editor again.  Update the following code to add the script section:
 

<div id="myDiv" class="alert alert-info">Hello World</div>
 
<script>
$('#myDiv').html('Howdy');
</script>

What we've done here is use jQuery to identify the DIV by it's ID (myDiv).   We've then replaced the HTML code inside the DIV to display Howdy instead of Hello World.

We've used the HTML function in jQuery as that would allow us to add HTML tags, like <b></b>, <li></li> or even <a></a>.  There are countless permutations you can use with a range of different jQuery code, but for now, this is a pretty good start.
 

Adding your own style

This isn't going to be a full tutorial on CSS, that would be impossible.  The permutations are close to endless, but what this tutorial can do is introduce the basics.   As we stated in the introduction, the HTML widget can run CSS (cascading style sheets). 

Using CSS in a single HTML widget on a site will continue to be applied to all sites, until you close down the original site.   This is a bit of a double-edge sword in it can be very useful if you wish to change the style of text links throughout your VLE by placing some CSS on your school dashboard, but that can backfire if you don't limit it.

There are two simple ways to style your DIV, id and class.

• id is very handy for styling individual DIVs
• class is useful for grouping, then styling DIVs.

When we created the DIV back on Hello World, we used the Bootstrap classes alert and alert info - alert 'drew' the box and alert-info made it blue.

Now, suppose you want to draw your own box, you could try something like:
 

<style>

.myBox {
width:50%;
height:150px;
background:#FF00FF;
border:1px solid #000000;
border-radius:10px;
margin:10px;
padding:10px;
font-size:16pt;
}

</style>

<div id="myDiv" class="myBox">Hello World</div>

Breaking down what we've done here:
 

• We opened a style tag, that tell the browser now to display the code, but to run it (<style>).
  
  Helpful link - W3Schools CSS
   
• We created a class, denoted by the .  (# is used for ids)
   
• We set the width of our DIV to be 50% of the available space (width:50%;)
   
• We made the height 150 pixels high (height:150px;)
   
• We set the background for our DIV to be purple, using HEX code - (background#FF00FF;) 
  
  Helpful link - Colour Picker
   
• We gave is a black border, set to a solid line, 1 pixel thick, (border:1px solid #000000;)
   
• We rounded the corners (border-radius:10px;)
   
• We gave it some some on all four side, by giving it a margin of 10 pixels (margin:10px;)
   
• We gave the text inside some padding set to 10pixels (padding:10px;)
   
• We set the font size to be a bit larger, using point size (font-size:16pt;)
   
• We closed the <style> section (</style>)
  ​
• We gave our DIV the class we created in the style (class="myBox")
  
   

Here's a more complex example of styling DIVs, this time using an outer DIV to contain others:
 

<style>
.myOuterDiv {
    width:400px;
    height:250px;
    margin-left:auto;
    margin-right:auto;
    border:1px solid #000000;
}
.myFirstBox {
    width:70%;
    height:70%;
    float:left;
    background:#6699FF;
    line-height:150px;
    vertical-align:middle;
    text-align:center;
}
.mySecondBox {
    width:30%;
    height:70%;
    float:left;
    background:#99FF66;
}
.myThirdBox {
    width:100%;
    height:30%;
    float:left;
    background:#FFFFFF;
}

</style>

<div class="myOuterDiv">
    <div class="myFirstBox">My First Box</div>
    <div class="mySecondBox">My Second Box</div>
    <div class="myThirdBox">My Third Box</div>
</div>

There's a lot more we could cover, including how to style Frog elements, but we'll save that for another tutorial.  Instead, let's learn how the browser can help us to use Frog's APIs.
 

Using the Browser's Console

Let's jump right in and add the following code to a new HTML widget:
 

<div id="myDiv2" class="alert alert-info">Hello World</div>
 
<script>
var user = FrogOS.getUser();
console.log(user);
</script>

We've created a new DIV (myDiv2) which we're doing nothing with (yet).  The interesting bit is in the script.

We've created a variable (using var) called user and we've added information to that variable using one of Frog's APIs  - getUser().  

​

This API identifies the current user and brings back all the information we have about them. In order to see that information, the script is told to display it in the console using the command log(user).
 

For you to see this information, you'll need to open the developer tools.

Google Chrome, it's currently either:

• Menu > More tools > Developer Tools
• Hold CTRL + SHIFT + I

Internet Explorer:

• Menu > F12 Developer Tools
• Tap F12
   

Click on the Console tab for either browser.  You'll probably see a page full of returned data.   At this point, the easiest option is to clear it.

Look for this symbol in Chrome...

or this one in IE...

Close your page, clear the console and then reopen it to rerun the script and see the results.

The image above is from my console.  As you can see, it returns some information already.  If you twirl down the triangle next to the start, you'll be able to view all the information provided by getUser().

Next, let's find out how to access it...

Hello Me

Using the HTML widget from the previous page and combining it with what we know from Hello World, let's see if we can return your name.

<div id="myDiv2" class="alert alert-info"></div>
 
<script>
var user = FrogOS.getUser();
$('#myDiv2').html(user.attr('displayname'));
console.log(user);
</script>

How it looks for me:

If you recall from the console, displayname was one of the terms shown which contained my name.  You can see other terms too, such as:

• username
• email
• pupil_number (for students this is the UPN)

attr is a function which returns the attributes of an object, in this case our variable user.  

We've specified the displayname as the attribute we wanted to use and because we placed that inside the html function, jQuery used that to change the contents of our DIV to show the displayname.

This seems like a good place to stop and let you play around with getUser() and the information you can extract for yourself.

Extension activity

Using CSS, HTML, jQuery and the getUser() API, see if you can create a business card for yourself in Frog.   To do this, you'll need to think about:

• how to style your business card
• display text in different positions
• change the text to the attributes available to you using getUser()