{"id":2832,"date":"2021-10-10T22:49:21","date_gmt":"2021-10-10T22:49:21","guid":{"rendered":"https:\/\/computerscienced.co.uk\/site\/?page_id=2832"},"modified":"2022-12-30T16:44:06","modified_gmt":"2022-12-30T16:44:06","slug":"vigenere-cipher-encryption","status":"publish","type":"page","link":"https:\/\/computerscienced.co.uk\/site\/vigenere-cipher\/vigenere-cipher-encryption\/","title":{"rendered":"Vigenere Cipher encryption"},"content":{"rendered":"\n<meta charset=\"utf-8\">\n\t\t<script src=\"https:\/\/computerscienced.co.uk\/site\/caesarwheel\/caesar_cipher.js\"><\/script>\n                <script src=\"https:\/\/computerscienced.co.uk\/site\/vigenere\/VigenereCipher.js\"><\/script>\n\t\t<link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/computerscienced.co.uk\/site\/caesarwheel\/caesar_cipher.css\" media=\"all\">\n\t\n\t\n<script>_wfx_flow='2cee8610-04d4-11ec-b0ce-32b5f385aed9'; window._wfx_live && _wfx_live();<\/script>\n<b>Enter the shift value:<\/b> <input id=\"shift\" type=\"number\" min=\"0\" max=\"25\" oninput=\"this.value = Math.abs(this.value)\" value=\"00\" maxlength=\"2\"><br>\n\t\t<canvas id=\"caesar\" width=\"480\" height=\"480\"><\/canvas>\n\t\t<br>\n\n\n\n<body onload=\"startup(); init();\">\n<style>\n#myDIV {\n  width: 100%;\n  padding: 5px 0;\n  text-align: left;\n  background-color: green;\n  color: white;\n  margin-top: 5px;\ndisplay: none;\n}\n#myDIVwrong {\n  width: 100%;\n  padding: 5px 0;\n  text-align: left;\n  background-color: red;\n  color: white;\n  margin-top: 5px;\ndisplay: none;\n}\n#myDIVhelp {\n  width: 100%;\n  padding: 5px 0;\n  text-align: left;\n  background-color: #0073aa;\n  color: white;\n  margin-top: 5px;\ndisplay: none;\n}\n<\/style>\n<script>\nvar caesarShift = function(str, amount) {\n\t\/\/ Wrap the amount\n\tif (amount < 0)\n\t\treturn caesarShift(str, amount + 26);\n\t\/\/ Make an output variable\n\tvar output = '';\n\t\/\/ Go through each character\n\tfor (var i = 0; i < str.length; i ++) {\n\t\t\/\/ Get the character we'll be appending\n\t\tvar c = str[i];\n\t\t\/\/ If it's a letter...\n\t\tif (c.match(\/[a-z]\/i)) {\n\t\t\t\/\/ Get its code\n\t\t\tvar code = str.charCodeAt(i);\n\t\t\t\/\/ Uppercase letters\n\t\t\tif ((code >= 65) && (code <= 90))\n\t\t\t\tc = String.fromCharCode(((code - 65 + amount) % 26) + 65);\n\t\t\t\/\/ Lowercase letters\n\t\t\telse if ((code >= 97) && (code <= 122))\n\t\t\t\tc = String.fromCharCode(((code - 97 + amount) % 26) + 97);\n\t\t}\n\t\t\/\/ Append\n\t\toutput += c;\n\t}\n\t\/\/ All done!\n\treturn output;\n}\nfunction startup(){\n    var x = document.getElementById(\"myDIV\");\n    x.style.display = \"none\";\n    var wordstoencrypt     = [\"protocols are a set of rules\",\"Von Neumann architecture\",\"Fetch Decode Execute cycle\",\"virtual memory\",\"non volatile memory\", \"volatile memory\",\"Random Access Memory\",\"Read Only Memory\",\"magnetic storage\",\"optical storage\",\"secondary storage\",\"Solid State Drive\",\"Local Area Network\",\"Wide Area Network\",\"client server model\",\"peer to peer model\",\"transmission media\",\"domain name server\",\"the cloud\",\"virtual network\",\"file transfer protocol\",\"Hyper Text Transfer Protocol\", \"Hyper Text Transfer Protocol Secure\",\"Internet Message Access Protocol\",\"IP address\",\"MAC address\",\"mesh topology\",\"network layers\",\"packet switching\",\"Post Office Protocol\",\"Simple Mail Transfer Protocol\",\"star topology\",\"anti malware software\",\"brute force attack\",\"Denial Of Service attack\",\"network forensics\",\"network policies\",\"penetration testing\",\"social engineering\",\"Structured Query Language\",\"SQL injection\",\"trojan horse attack\",\"user access levels\",\"data compression\",\"encryption software\",\"file management\",\"Graphical User Interface\",\"Operating System\",\"systems software\",\"user interface\",\"user management\",\"utility system software\",\"windows icons menus and pointers\",\"Computer Misuse Act\",\"Copyright Designs and Patents Act\",\"Creative Commons Licensing\",\"Freedom of Information Act\",\"open source software\",\"proprietary software\",\"The Data Protection Act\",\"computational thinking\",\"boolean operator\",\"data sanitation\",\"input sanitation\",\"boolean algebra\",\"assembly language\", \"high level language\",\"instruction set\",\"integrated development environment\",\"low level language\",\"machine code\",\"virtual machine\",\"American Standard Code for Information Interchange\"]\n    var rannum = Math.floor(Math.random() * wordstoencrypt.length);\n    w = wordstoencrypt[rannum];\n    document.getElementById(\"unencryptedword\").innerHTML = w;\n    \/\/j = Math.floor(Math.random() * 25)+1; \/\/ edited out for vigenere not needed\n    \/\/document.getElementById(\"shiftnumber\").innerHTML = j; \/\/ edited out for vigenere not needed\n    wordstoencrypt=[\"lemon\",\"peach\",\"apple\",\"pear\",\"orange\"] \/\/vigenere add\n    var rannum = Math.floor(Math.random() * wordstoencrypt.length); \/\/ vigenere add\n    phrase = wordstoencrypt[rannum]; \/\/vigenere add\n    var answer = VigenereCipher.encrypt(w, phrase); \/\/ vigenere edit     var answer = caesarShift(w, j);\n    console.log(answer)\n    \/\/document.getElementById(\"answer\").innerHTML = answer;\nvar y = document.getElementById(\"textInput\");\n    y.value=\"\";\n\/\/console.log(\"Hello world\")\ndocument.getElementById(\"passphrase\").innerHTML = phrase;\n\/\/console.log(phrase)\nvar masterstring = \"abcdefghijklmnopqrstuvwxyz\" ;\nvar instring = phrase;\nvar restring = \" \" \/\/ the result goes into this variable\nfor (var i = 0 ; i < instring.length ; i++) {\nrestring += masterstring.indexOf(instring.charAt(i).toLowerCase()) + \" \";\n}\n\/\/console.log(restring)\ndocument.getElementById(\"numbers\").innerHTML = restring;\n}\nfunction myFunction() {\nvar encrypted = VigenereCipher.encrypt(w, phrase);        \/\/ vigenere edited     var encrypted = caesarShift(w, j);\nvar userInput = document.getElementById(\"textInput\").value;\ndocument.getElementById(\"encrypted\").innerHTML = encrypted;\nif (userInput == encrypted) {\n  var x = document.getElementById(\"myDIV\");\n  if (x.style.display === \"block\") {\n    x.style.display = \"none\";\n  } else {\n    x.style.display = \"block\";\n  }  \n}else{\n  hideright();\n    var y = document.getElementById(\"myDIVwrong\");\n  if (y.style.display === \"block\") {\n    y.style.display = \"none\";\n  } else {\n  y.style.display = \"block\";\n  }  \n} \n}\nfunction hidewrong(){\n var y = document.getElementById(\"myDIVwrong\");\n  if (y.style.display === \"block\") {\n    y.style.display = \"none\";\n  } else {\n  y.style.display = \"none\";\n  }     \n}\nfunction hideright(){\n var v = document.getElementById(\"myDIV\");\n  if (v.style.display === \"block\") {\n    v.style.display = \"none\";\n  } else {\n  v.style.display = \"none\";\n  }     \n}\nfunction help() {\nvar z = document.getElementById(\"myDIVhelp\");\n  if (z.style.display === \"block\") {\n    z.style.display = \"none\";\n  } else {\n    z.style.display = \"block\";\n  }\n}\n<\/script>\n<div id=\"myDIVhelp\" onclick=\"help()\">\n<h2>N.B - This help section is in the process of being written, below is the help for using the Caesar cipher wheel<\/h2>\n<h2>How do I encrypt a message using the Caesar Cipher?<\/h2>\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/dMz8274CaTM\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<br>First we need to know the shift value.  This is displayed below after the text that says \"Encrypt the following word using a shift of \" and is randomised each time. <br\/><br\/>\nIf this value said 7 we would enter the number 7 into the <b>\"Enter shift value\"<\/b> box at the top.<br\/>\nYou will see the outer wheel turn so that the letter A on the outer wheel is over the letter H on the inner wheel.<br\/><br\/>\nTo <b>encode<\/b> or <b>encrypt<\/b> a message find the letter from the OUTSIDE you want to use and the letter next to it on the INSIDE is the coded letter you should write down.<br\/><br\/>\n<b>EG<\/b> If we wanted to encode the word \"hat\" we would find the letter h on the outside wheel and choose the letter on the inside - h = o.  Same with the letter a = h and the same with the letter t = a.  Hat shifted by 7 and encoded is oha.\n<\/div>\n<h3>Encryption Key Word = <span id=\"passphrase\"><\/span><\/h2>\n<h3>Shift numbers from phrase = <span id=\"numbers\"><\/span><\/h2>\n<h2>Encrypt the following phrase - <span id=\"unencryptedword\"><\/span><\/h2>\n<p>Enter your answer: <input size=\"35\" type=\"text\" id=\"textInput\" onfocus=\"hidewrong();\" \/><\/p>\n<button onclick=\"myFunction()\">Submit your answer<\/button>\n<button onclick=\"startup()\">Try another<\/button>\n<button onclick=\"help()\">Help<\/button><br>\n<div id=\"myDIV\">\n<h3>That is right!<\/h3>\n    <p>The encrypted message was <span id =\"encrypted\"><\/span><\/p>\n<\/div>\n<div id=\"myDIVwrong\">\n<h3>That is not correct<\/h3>\n<h4>Have you spelled it correctly?  Do not put in capital letters and put in the spaces!<\/h4>   \n<\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-100 is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link has-border-color has-primary-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/computerscienced.co.uk\/site\/vigenere-cipher\/\">Go back to the main Vigenere Cipher page<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-100 is-style-fill\"><a class=\"wp-block-button__link has-border-color has-primary-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/computerscienced.co.uk\/site\/caesar-cipher-wheel\/\">Try out Caesar Cipher instead<\/a><\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity is-style-wide\"\/>\n\n\n\n<p>Original idea code from <a href=\"https:\/\/github.com\/rheh\/HTML5-canvas-projects\/tree\/master\/caesar_cipher\">https:\/\/github.com\/rheh\/HTML5-canvas-projects\/tree\/master\/caesar_cipher<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Enter the shift value: N.B &#8211; This help section is in the process of being written, below is the help&#8230;<\/p>\n","protected":false},"author":1,"featured_media":2591,"parent":2811,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"disable_featured_image":true,"footnotes":""},"class_list":["post-2832","page","type-page","status-publish","has-post-thumbnail","hentry"],"blog_post_layout_featured_media_urls":{"thumbnail":["https:\/\/computerscienced.co.uk\/site\/wp-content\/uploads\/2021\/09\/undraw_secure_files_re_6vdh.svg",150,150,true],"full":["https:\/\/computerscienced.co.uk\/site\/wp-content\/uploads\/2021\/09\/undraw_secure_files_re_6vdh.svg",866,637,false]},"categories_names":null,"comments_number":"0","_links":{"self":[{"href":"https:\/\/computerscienced.co.uk\/site\/wp-json\/wp\/v2\/pages\/2832","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/computerscienced.co.uk\/site\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/computerscienced.co.uk\/site\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/computerscienced.co.uk\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/computerscienced.co.uk\/site\/wp-json\/wp\/v2\/comments?post=2832"}],"version-history":[{"count":26,"href":"https:\/\/computerscienced.co.uk\/site\/wp-json\/wp\/v2\/pages\/2832\/revisions"}],"predecessor-version":[{"id":6118,"href":"https:\/\/computerscienced.co.uk\/site\/wp-json\/wp\/v2\/pages\/2832\/revisions\/6118"}],"up":[{"embeddable":true,"href":"https:\/\/computerscienced.co.uk\/site\/wp-json\/wp\/v2\/pages\/2811"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/computerscienced.co.uk\/site\/wp-json\/wp\/v2\/media\/2591"}],"wp:attachment":[{"href":"https:\/\/computerscienced.co.uk\/site\/wp-json\/wp\/v2\/media?parent=2832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}