STIC I

Sciences et Technologies de l'Information et de la Communication

Course Introduction

Reminder MINIT

See the Pen Client Side JavaScript basic example by Mattia A Fritz ( @mafritz) on CodePen.

Develop interactive applications to foster learning.

Main Concepts

• Computational Thinking
  Fancy name to include problem solving, programming, logical, ... skills
• Interaction
  To what extent users/learners determine the behavior of an application
• Soft Skills — but hard to get!
  1/ Writing in a common environment — EduTechWiki
  2/ Reading (and understanding) technical documentation
  3/ When and how to ask for help!

Perspective

Computational Thinking (CT)

“We consider computational thinking to be the thought processes involved in formulating problems so their solutions can be represented as computational steps and algorithms”

— Alfred V. Aho, 2012

Suggested reading: Denning, P. J. (2016). Remaining Trouble Spots With Computational Thinking. Cacm, 60(33), 33–39.

CS for All: teaching CT

CT Blocks

• Decomposition: divide a problem in smaller parts.
• Pattern Recognition: find similarities between problems.
• Abstraction: generalize the pattern beyond the current case.
• Algorithms: develop the steps to solve the problem.

Enigma #1

Frère Luc est l'intendant de l'abbaye. Très économe, il réutilise les bouts de cierges usagés pour en faire de nouveaux. Il est capable de reconstituer un cierge à partir de trois bouts de cierges qu'il fait fondre. Combien pourra-t-il reconstituer de cierges avec les neuf bouts de cierges qu'il a récupérés ce matin dans l'abbatiale ?

Computational Thinking #1

• With 9 pieces he can build 3 candles
• Burning 3 candles he will obtain 3 pieces
• With these 3 pieces he obtains 1 new candle
• Solution: 4 candles

Computational Solution #1

Code solution #1

//Set the initial number of candles and pieces required
var numberOfPieces = 9;
var piecesRequired = 3;
//Set a variable to be incremented for each new candle
var totalCandlesObtained = 0;
//Go on until the number of candles can be divided by the pieces
while (numberOfPieces / piecesRequired >= 1) {
    //At each cycle, define the new number of candles and add them to the total
    numberOfPieces = Math.floor(numberOfPieces / piecesRequired);
    totalCandlesObtained += numberOfPieces;
}
//Print the result
console.log('TOTAL:' + totalCandlesObtained + ' candles');

You can copy the code in your browser's console.

Enigma #2

Comment obtenir 1'000 au moyen d'une addition ne comportant que des 8 ?

Computational Thinking #2

• 1000 - biggest number fitting in: 888
• Remaining : 112
• 112 - biggest number fitting in: 88
• Remaining: 24
• 24 - biggest number fitting in: 8 + 8 + 8
• Solution : 888 + 88 + 8 + 8 + 8

Computational Solution #2

Computational Change

See the Pen Client Side JavaScript basic example 10 by Mattia A Fritz (@mafritz) on CodePen.

Switch from decimal to binary counting

Interaction

“...is a kind of action that occurs as two or more objects have an effect upon one another. The idea of a two-way effect is essential in the concept of interaction, as opposed to a one-way causal effect”

— Wikipedia

Interaction: technical

For a simple interaction...

Interaction and Learning

Same game, 3 interactions

Task: compare the 3 versions

Use all criteria that comes to your mind!

There is no right or wrong answer!

Writing version

Point and Click version

Drag and Drop version

It's up to you now...