Great Javascript and css Exercise for your Students

The display property specifies the display behavior of an element. The position of an element is indicated as spanning from a start tag, possibly including some child content, and is terminated by an end tag. What is an element?

In the HTML syntax, most elements are written with a start tag and an end tag, with the content in between. An HTML tag is composed of the name of the element, surrounded by angle brackets. An end tag also has a slash after the opening angle bracket, to distinguish it from the start tag. For example, a paragraph, which is represented by the p element, would be written: <p>Teaching is fun…</p>

The display property specifies the display behavior of an element. Every element on a web page is a rectangular box. The CSS display property determines how that rectangular box behaves.

An element can be accessed by using: document.getElementById(“hidethis”)

The getElementById MUST be written exactly as shown (more here Mozilla.org).

The Javascript syntax is as follows: object.style.display=”<some value here>”

Some critical display values relating to the code below are:

  • table-row
  • none

For a complete list of values, W3schools.com has the answer.

Now the HTML code of the assignment:

<html>

<head>

<script>

function toggle() {

if( document.getElementById(“hidethis”).style.display == ‘none’ )

document.getElementById(“hidethis”).style.display = ‘table-row’;

else

document.getElementById(“hidethis”).style.display = ‘none’;

}

</script>

</head>

<body>

<span onClick=”toggle();”>toggle</span><br/>

<table border=”1″>

<tr>

<td>Always visible</td>

</tr>

<tr id=”hidethis” style=”display:none;”>

<td>Hide this row</td>

</tr>

<tr>

<td>This row is always visible…</td>

</tr>

</table>

</body>

</html>

Initially, not all rows are visible. The particular row that we need to toggle is shown by default with <tr id=”hidethis” style=”display:none;“>

The Javascript function toggle() does the work for us. Yes, but what about having several rows that we would want to toggle. How can we modify this minimal HTML code to solve our problem?

To start with, we need to modify the function from

toggle()

to

toggle(row)

Every time we will call this function we need to “pass” the ID of the particular row. Then, we need to create an extra (or more) row. Insert the following code in the above axample:

<tr id=”hidethis2″ style=”display:none;”>

<td>Hide this row</td>

</tr>

Now, we need to work on the toggle(row) function’s code and incorporate the “row” argument that will be passed.

if( document.getElementById(“hidethis”+row).style.display == ‘none’ )

document.getElementById(“hidethis”+row).style.display = ‘table-row’;

else

document.getElementById(“hidethis”+row).style.display = ‘none’;

The complete code follows:

<html>

<head>

<script>

function toggle(row) {

if( document.getElementById(“hidethis”+row).style.display==’none’ )

document.getElementById(“hidethis”+row).style.display = ‘table-row’;

else

document.getElementById(“hidethis”+my_row).style.display = ‘none’;

}

</script>

</head>

<body>

<span onClick=”toggle(1);”>toggle1</span><br/>

<span onClick=”toggle(2);”>toggle2</span><br/>

<table border=”1″>

<tr>

<td>Always visible</td>

</tr>

<tr id=”hidethis1″ style=”display:none;”>

<td>Hide this 1</td>

</tr>

<tr>

<td>Always visible</td>

</tr>

<tr id=”hidethis2″ style=”display:none;”>

<td>Hide this 2</td>

</tr>

</table>

</body>

</html>

Please pay attention to the formatting in the above HTML code, specifically the indentation. Do you ask your students to format their code in a specific manner?

Posted in Activity, code, Education, html, Javascript, Javascript, Lesson Plan, Master Teacher Program, MHTC, online school records, Panagiotopoulos, Software, STEM, support, training | Tagged , , , , , , , , , , , | Leave a comment

What is the need and use of DOCTYPE?

When you have a question about html you should always go to www.w3.org, the World Wide Web Consortium (W3C) is an international community where member organizations, a full-time staff, and the public work together to develop Web standards.

Now back to the DOCTYPE question I am trying to answer. The very beginning of an html document must start with a declaration that makes sure the document will be parsed the same way by different browsers. For html 5 the declaration is:

<!DOCTYPE html>

It MUST be entered exactly as shown above.

There are several DOCTYPES and W3C lists and explains all of them.

Happy coding!

Posted in Activity, code, curriculum, Education, html, online school records, Panagiotopoulos, project, Software, STEM, support, training | Leave a comment

Simple Javascript to Hide a row

Here is a short piece of Javascript that will hide the row of a table:

<!DOCTYPE html>
<html>
<head>
<script>
function hide(my_id) {
//alert(“working on row ID# “+my_id);
document.getElementById(my_id).style.display = ‘none’;
}
</script>
</head>

<body>
<table border=“1”>
<tr id=“row_1” onclick=“hide(‘row_1’);”>
<td>Row #1 Always visible</td>
</tr>

<tr id=“row_2” onclick=“hide(‘row_2’);”>
<td>Row #2 Hide this</td>
</tr>

<tr id=“row_3” onclick=“hide(‘row_3’);”>
<td>Row #3 Always visible</td>
</tr>

</table>

</body>

</html>

This is the trimmed down version of code that I use to delete row data. So, let’s say I list several rows containing student data and each row identifies one unique student. I include an icon

using the following php code

print “<td><img onclick=\”change_value(” . $row[‘student_id’] . “, ‘delete’, ‘delete_value” . $row[‘student_id’] . “‘)\” src=\”../images/red_x_icon.png\” alt=\”delete_row\”><span id=\”delete_value” . $row[‘student_id’] . “\”>&nbsp;</span></td>\n”;

When the user clicks on the red icon with the “X” I include code that will delete the data associated with the student ID (perhaps a duplicate attendance record that was entered incorrectly) and upon successful completion I then hide the row. Cool!

Happy coding!

Posted in Activity, code, Education, html, Javascript, Javascript, online school records, Panagiotopoulos, php, Software, STEM, support, training | Tagged , , , , , , | Leave a comment

What is Minecraft: Pi Edition?

Minecraft: Pi Edition is a version of Minecraft developed for the Raspberry Pi. It is based on an old version Alpha 0.6.1 of Pocket Edition but is slightly cut down, containing a revised feature set and support for multiple programming languages. Pi Edition is intended as an educational tool for novice programmers. Although officially discontinued, it is still available to download for free.

On September 15, 2014, the Raspberry Pi Foundation announced that Minecraft: Pi Edition would be installed by default with new versions of the Raspbian operating system  under the GPL (a very popular Free Software License) license.

Minecraft is already installed on the Pi and it’s waiting for you to use it.

Happy coding!

Posted in Education, Installation, instruction, Minecraft, online school records, Operating System, Python, Raspberry Pi, setup, Software, STEM, support, training | Tagged , , , , , , , , | Leave a comment

What is MatPlotLib

Directly from www.matplotlib.org.

Matplotlib is a Python 2D plotting library which produces publication quality figures in a variety of hardcopy formats and interactive environments across platforms.

Matplotlib tries to make easy things easy and hard things possible. You can generate plots, histograms, power spectra, bar charts, errorcharts, scatterplots, etc., with just a few lines of code.

Evan Panagiotopoulos is working on a new Python workshop that is full of math applications. Python, though, needs to have the “matplotlib” module. Don’t worry because the installation on a Raspberry pi is just easy.

Open a command window and fire-up the following command:

sudo apt-get install python3-matplotlib

command window on a raspberry pi

Click on the icon and the command window will open up.

What? You don’t know what “sudo” means? It is a shortcut for “super user do”.

What? You don’t know what a “super user” is? No worries. Every Linux or Unix system has one of those users and s/he is authorized to do just everything on that computer, including deleting all files!

What? You don’t know what “apt-get” is? No worries, yet again. apt-get is the command-line tool for working with APT software packages. APT (the Advanced Packaging Tool) is an evolution of the Debian .deb software packaging system. It is a rapid, practical, and efficient way to install packages on your system.

Phew! Too many definitions.

So, with the patplotlib module installed you have the ability to create professional looking plots of mathematical functions. SWEET!

Posted in Education, Installation, Linux, Master Teacher Program, MHTC, New Paltz, NY, online school records, Operating System, Orange County, Panagiotopoulos, project management, Python, Raspberry Pi, setup, Software, STEM, support, training, Wordpress | Tagged , , , , , , , , , , , , , , | Leave a comment

New Master Teachers Announcement

Congratulations to the 214 newly selected #MasterTeachers. This brings the total to 908 teachers participating in this program.

Here is the complete announcement.

Posted in Education, Master Teacher Program, NY, STEM | Tagged , , , , | Leave a comment

Adding Multiline Comment in Python

Recently, during a workshop on Python the question came up about adding multiline comments.
You can accomplish this by surrounding your comments with three single quotes.
Here is an example:

”’
This is a multiline comment
This is a multiline comment
This is a multiline comment
This is a multiline comment
This is a multiline comment
”’

print “This is a test…”

#Single line comment

”’
This is a multiline comment
This is a multiline comment
This is a multiline comment
This is a multiline comment
This is a multiline comment
”’

print “This is a test…”

Happy coding!

Posted in Education, Panagiotopoulos, Python, Software, STEM, support, training | Tagged , , , , , , , , , | Leave a comment

Using Python on a Mac Computer

Mac computers come with Python already installed.

DO NOT UNINSTALL/REMOVE THIS PYTHON INSTALLATION BECAUSE THE SYSTEM IS USING IT.

Here is a video that shows how I access a simple python script on my Mac.

The command line interface, where you can type commands, is located under the Applications->Utilities. It is called Terminal.

Once you have opened the Terminal interface you can enter the following command that shows the version of Python.

python -V

Happy coding!

Posted in code, Education, instruction, Mac, Panagiotopoulos, Python | Tagged , , , , , , , , , | Leave a comment

Hello Union-Endicott and Southern Tier Master Teachers

Recently I visited the Union-Endicott high school in order to check their computer labs for the upcoming workshop Minecraft Coding Using Python on a RaspberryPi-kind of computer.

Connecting the HDMI port of a Raspberry Pi to a monitor that doesn’t have such an interface is just priceless. Most monitors have either a DVI or DB15 connection. Here is a nice graphic that shows what each one looks like:

 

 

Posted in Installation, Raspberry Pi, support, training | Tagged , , , , , , | Leave a comment

WordStar: The Grandfather of Word Processors

WordStar was the world’s best selling word processor. It was introduced in 1979 and by 1983 they had sold $100 million worth of it.

Now, no one knows anything about this company. Why? The upper echelon had no vision for the software and the company itself. They were trying to maximize profits without investing in the company.

The package that I have supports 10, 12, and 17 point fonts! Wow!

WordStar-01 WordStar-02

Posted in DOS, evan, History, NY, online school records, Operating System, Panagiotopoulos, Walden | Tagged , , , , , , | Leave a comment