This repository has been archived by the owner on May 11, 2021. It is now read-only.
/
caesar_cipher_decryption.html
110 lines (96 loc) · 5.14 KB
/
caesar_cipher_decryption.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html data-require="math graphie word-problems cipher interactive">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Caesar cipher decryption</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="M">person( 1 ).toLowerCase()</var>
<var id="SHIFT">randRange(1,25)</var>
<var id="C">applyCaesar(M,SHIFT)</var>
<var id="LOWER_BOUND">0</var>
<var id="UPPER_BOUND">25</var>
</div>
<div class="problems">
<div>
<div class="question">
<p data-if="isMale(2)">
<var>person(2)</var> is expecting to receive an encrypted message with the name of one of his classmates.
He knows the message will be encrypted with a <strong>Caesar cipher</strong> using a shift of <code><var>SHIFT</var></code>.
When he returns to his desk, he finds a piece of paper with the following message on it:
</p><p data-else="">
<var>person(2)</var> is expecting to receive an encrypted message with the name of one of her classmates.
She knows the message will be encrypted with a <strong>Caesar cipher</strong> using a shift of <code><var>SHIFT</var></code>.
When she returns to her desk, she finds a piece of paper with the following message on it:
</p>
<p><strong><var>C</var></strong></p>
<p>Help <var>person(2)</var> crack the code, by typing the decrypted message in the answer box using all lowercase letters.</p>
</div>
<div class="render-answer-area-here"></div>
<div>
<p>You can use the below slider to help you decode the message.<br>
Slide the <strong><span class="hint_orange">orange dot</span></strong> to shift the encrypted alphabet</p>
<center><br><strong>Encrypted Alphabet</strong></center>
</div>
<div class="graphie" id="number-line">
<!-- Use for spacing the Cipher letter guide -->
var indent = 1;
init({
range: [ [LOWER_BOUND - 0.5, UPPER_BOUND * indent + 0.5], [-1, 1] ],
scale: [19, 40]
});
<!-- Draws the line-->
style({arrows: ""});
line( [ 0, 0 ], [ UPPER_BOUND * indent, 0 ] );
style({arrows: ""});
line( [ 0, 0 ], [ LOWER_BOUND, 0 ] );
var myLabels = new Array();
style({arrows: ""});
for ( var x = LOWER_BOUND; x <= UPPER_BOUND; x+=1 ) {
var markLength;
x % 5 === 0 ? markLength = 0.2 : markLength = 0.1
line( [ x * indent, -markLength ], [ x * indent, markLength ] );
label( [ x * indent, 0.53 ], "abcdefghijklmnopqrstuvwxyz"[x], "center", false);
myLabels[x] = label( [ x * indent, -0.53 ], "abcdefghijklmnopqrstuvwxyz"[x], "center", false);
}
addMouseLayer();
graph.movablePoint = addMovablePoint({ constraints: { constrainY: true }, snapX: indent });
graph.movablePoint.onMove = function( x, y ) {
for ( var i = 0; i <= UPPER_BOUND; i+=1 ) {
myLabels[i].remove();
myLabels[i] = label( [ i , -0.53 ], "abcdefghijklmnopqrstuvwxyz"[abs((i-x)+26) % 26], "center", false);
}
return [ min( max( LOWER_BOUND, x ), UPPER_BOUND * indent ), y ];
};
</div>
<div>
<center><strong>Original Alphabet</strong></center>
</div>
<div class="solution" data-type="lowers">
<var>M</var>
</div>
</div>
</div>
<div class="hints">
<p>
Since the message was encrypted by shifting each letter right by <code><var>SHIFT</var></code>, to decrypt it we need to
shift each letter left by <code><var>SHIFT</var></code>.
</p>
<p>
If we take the first letter <strong><var>C[0]</var></strong> and shift it left by <code><var>SHIFT</var></code>,
we get the letter <strong><var>M[0]</var></strong>.
</p>
<p>
If we take the second letter <strong><var>C[1]</var></strong> and shift it left by <code><var>SHIFT</var></code>,
we get the letter <strong><var>M[1]</var></strong>.
</p>
<p>
Continuing this for each letter, the decrypted message is: “<var>M</var>”
</p>
</div>
</div>
</body>
</html>