Teaching Computer Science, Tic Tac toe

1. TIC –TAC TOE
Creating your owngame

3. IMPLEMENTATION
HTML TABLE
CSSFORSTYLING
javaScript

4. IMPLEMENTATION
HTML TABLE
CSSFORSTYLING
A table consists of
rows and columns

5. IMPLEMENTATION
Question!
A = ?
B = ?
A
B

6. IMPLEMENTATION
Answer!
A points to the column
B points to the row
A
B

7. IMPLEMENTATION
#
Question!
# is at :
Column = ?
Row = ?

8. IMPLEMENTATION
#
Answer!
# is at :
Column = 2
Row = 2
1 2 3
123
C o l u m n
Ro w

9. IMPLEMENTATION
HTML TABLE
CSSFORSTYLING
How do we use
this to create our
game?

10. IMPLEMENTATION
HTML TABLE
<table>
……
</table>
<table>
is used to create tables in
HTML

11. IMPLEMENTATION
HTML TABLE
<table>
< tr>….</tr>
</table>
<tr>
is used to add a row to the
table

12. IMPLEMENTATION
HTML TABLE <table>
<tr>
<td>..</td>
</tr>
</table>
<td>
is used to add a column to
the row

13. IMPLEMENTATION
Question!
How many rows and
columns for this table?

14. IMPLEMENTATION
Answer!
3 rows and 3 columns

15. HTML & CSS
Task : 1
Create an HTML code for a
table with 3 rows and 3
columns.
Use CSS to
decorate your
table

16. JAVASCRIPT :
functions()Task : 2
Create javaScript function that adds
an “X” to the table on the position
clicked.

17. JAVASCRIPT(examp
le)
For example, the value of
the table at row 1 and
column 0 changes to X
when it is clicked!

18. JAVASCRIPT(examp
le)
For example, the value of
the table at row 1 and
column 2 changes to X
when it is clicked!
X

19. If (statements):
Task : 3
Modify your function so that it
checks if the clicked position is
already taken before proceeding to
add the “x”
X

20. Math.random()
Task : 4
Modify your function Use the
random method to place an “O” on
an open space.
X
O

21. Using API
Task : 5
Use the functions provided to from
the java-script file provided by the
facilitator to complete your game!
X
O

22. Have
fun!