Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	LiveChat 1.1
ID	5175255520051200
Created	8 years ago, 1491321596822
Updated	5 years ago, 1587739363817
Code	<!DOCTYPE html> <html> <script> /** * @LiveChat 1.1 * * Chat live with other Khan Academy users! * * * @LiveChat is maintained by @KonurPapa, but you can help make it better by contributing code or posting a suggestion. * * @Credits: * Brynden (Gigabyte Giant), for the code that reads the comment data. His awesome program can be viewed here: * https://www.khanacademy.org/cs/webpage/6470413261864960 * * Matthias (Soli Deo gloria), for providing various helpful API information over the past year. His profile can be viewed here: * https://www.khanacademy.org/profile/MatthiasSaihttam * * Blaze, for providing the pulldown that displays the saved chats. His profile can be viewed here: * https://www.khanacademy.org/profile/ct200224 * * And thanks to Stack Overflow for answering several important questions. * * @Advanced_settings * * Chat refresh time (in seconds) / var load = 1; /* * Posts to display at one time / var postCap = 50; /* * The code after this point should not be edited, unless you are prepared for the chat to break. / </script> <head> <meta charset="utf-8"> <title>LiveChat 1.1</title> <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <style> code, a, a:hover { color: #1FAB54; } .bold { font-weight: bold; } .italic { font-style: italic; } .inline-code { padding: 2px; font-family: monospace; background-color: rgb(230, 230, 230); color: #1FAB54; } .block-code { margin: 10px; padding: 15px; font-family: monospace; background-color: rgb(240, 240, 240); color: #1FAB54; } </style> </head> <body> <div id="chat" style="display: block;"> <div style="background-color: #1FAB54; padding: 0.5%; margin-bottom: 1.5%; font-family: Ubuntu; text-align: center; font-size: 2.5vw; color: white;"> <img src="https://www.kasandbox.org/programming-images/avatars/avatar-team.png" width="10%"> <div id="name" style="position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; top: 4%; text-shadow: -1px -1px 0 rgb(100, 100, 100), 1px -1px 0 rgb(100, 100, 100), -1px 1px 0 rgb(100, 100, 100), 1px 1px 0 rgb(100, 100, 100); cursor: default;"></div> <div style="cursor: pointer;" onclick="document.getElementById('chat').style.display = 'none'; document.getElementById('new').style.display = 'block'; document.getElementById('help').style.display = 'none';"> <img src="https://www.kasandbox.org/programming-images/creatures/Hopper-Jumping.png" title="Ooh, new chats!" width="4%" style="position: absolute; left: 2%; top: 3%;"> <div style="position: absolute; top: 4%; left: 7%;">New Chat</div> </div> <div style="cursor: pointer;" onclick="document.getElementById('chat').style.display = 'none'; document.getElementById('new').style.display = 'none'; document.getElementById('help').style.display = 'block';"> <img src="https://www.kasandbox.org/programming-images/creatures/OhNoes.png" title="Oh Noes, help me!" width="5%" style="position: absolute; right: 2%; top: 3%;"> <div style="position: absolute; top: 4%; right: 8%;">Help</div> </div> </div> <div class="container-fluid"> <div data-area></div> </div> <div id="comment" style="position: fixed; bottom: 0%; width: 100%; height: 25%;"></div> <script src="https://cdn.jsdelivr.net/jquery/3.0.0-alpha1/jquery.min.js"></script> <script> alert("Hey there! Sorry about this, but I was asked by a Guardian to disable LiveChat due to the fact that it could potentially spam KA's APIs if used en masse.\n\nI appreciate you visiting the project though! If you'd like to look through the code perhaps you'll be interested to see how it works (or worked).") { //localStorage.setItem("LiveChat-chatName-LiveChat 1.0", "5603274948673536,kaencrypted_750a2acd99a51b985ca278d3dd474580_280fe0feae7a0aecb8071eb2ae4b590ed9dcabe57e585a96d8d3287f3358ed68a3afa365a188caceccf84f9791098019b3c820696cb65f927ccee0226924b7d181e011575e9a0a040172ca7103fce61edd067f83c0cdb531b0487c06474d90e8109599e61c0aa6e5f3d4f9f6b8e63413a03e867c5a69d33d8e44f13ee0429e0ece55869bfcdbc77b7affd21bddc4a451b0e190e798f19a6df391574b9e701847b6ffa1972584d48611f35e78c7e928ca86e2157df7b53988671d30404a7682ad"); if (localStorage.getItem("LiveChat-selectedChat") === null) { localStorage.setItem("LiveChat-selectedChat", "LiveChat 1.0"); } if (localStorage.getItem("LiveChat-welcome2") === null) { window.setTimeout(function() { alert("It looks like you're enjoying LiveChat! Try creating your own chat by going to Help > Adding New Chat") }, 180000); localStorage.setItem("LiveChat-welcome2", ""); } if (localStorage.getItem("LiveChat-welcome") === null) { alert("Welcome to LiveChat! Click Help in the top right corner to begin."); localStorage.setItem("LiveChat-welcome", "") } var currentChat = localStorage.getItem("LiveChat-chatName-" + localStorage.getItem("LiveChat-selectedChat")); //var prgId = currentChat.substr(0, localStorage.getItem("LiveChat-chatName-" + localStorage.getItem("LiveChat-selectedChat")).indexOf(",")); //var postId = currentChat.substr(localStorage.getItem("LiveChat-chatName-" + localStorage.getItem("LiveChat-selectedChat")).indexOf(",") + 1, localStorage.getItem("LiveChat-chatName-" + localStorage.getItem("LiveChat-selectedChat")).length); document.getElementById("name").innerHTML = "<strong>" + localStorage.getItem("LiveChat-selectedChat") + "</strong>"; } var comment = document.getElementById("comment").innerHTML = '<iframe style="width: 100%; height: 100%; border-top: 3px solid #1FAB54;" frameborder="0" src="https://www.khanacademy.org/computer-programming/pjs/' + prgId + '?editor=no">'; var postKey = postId; var apiUrl = "https://www.khanacademy.org/api/internal/discussions/"; apiUrl += postKey + "/replies?casing=camel"; function prettify(msg) { var boldCheck = /\([\S\ ]+)\/gi; var italicCheck = /\_([\S\ ]+)\_/gi; var inlineCodeCheck = /`([\S\ ]+)`/gi; var blockCodeCheck = /```([\S\ ]+)```/gi; var urlCheck = /(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-])\/?/gi; var newlineCheck = /[\r\n\|\n]+/g; msg = msg.replace(/\<[\S\s]+\>/g, ""); msg = msg.replace(/\<\/[\S\s]+\>/g, ""); msg = msg.replace(boldCheck, "<span class=\"bold\">$1</span>"); msg = msg.replace(italicCheck, "<span class=\"italic\">$1</span>"); msg = msg.replace(blockCodeCheck, "<div class=\"block-code\">$1</div>"); msg = msg.replace(inlineCodeCheck, "<span class=\"inline-code\">$1</span>"); msg = msg.replace(urlCheck, "<a href=\"$2.$3\">$2.$3$4</a>"); msg = msg.replace(newlineCheck, "<br>"); return msg; } var time = (load < 1) ? 1000 : load 1000; window.setInterval(function() { $.getJSON(apiUrl + "&callback=?", function(data) { console.log(data); $("[data-area]").empty(); for (var i = data.length - 1; i > data.length - postCap - 2; i--) { $("[data-area]").append( $("<div>").addClass("post") .append( $("<p>").html(prettify(data[i].content)) ) .append( $("<img src='" + data[i].authorAvatarSrc + "' width='2%' style='margin-right: 0.5%; margin-top: -0.5%;'>") ) .append( $("<a href='https://www.khanacademy.org/profile/" + data[i].authorKaid + "'>").text(data[i].authorNickname).css("color", "#1FAB54") ) .append( $("<small>").text(" - posted " + data[i].date.slice(0, 10)) ) .append( $("<hr>") ) ); } }); }, time); </script> </div> <div id="new" style="display: none; background-color: #1FAB54; padding-bottom: 20%;"> <img src="https://www.kasandbox.org/programming-images/creatures/Hopper-Jumping.png" title="Ooh, new chats!" width="8%" style="padding: 1.5%"> <div id="displayed" style="position: absolute; top: 5%; left: 9%; padding: 0.5%; background-color: rgb(83, 186, 82); font-family: Ubuntu; text-align: center; font-size: 2.5vw; color: white; cursor: pointer;" onclick="this.style.backgroundColor = 'rgb(83, 186, 82)'; document.getElementById('add-new').style.backgroundColor = '#1FAB54'; document.getElementById('new-chat1').style.display = 'block'; document.getElementById('new-chat2').style.display = 'none';">Displayed Chat</div> <div id="add-new" style="position: absolute; top: 5%; left: 29%; padding: 0.5%; font-family: Ubuntu; text-align: center; font-size: 2.5vw; color: white; cursor: pointer;" onclick="this.style.backgroundColor = 'rgb(83, 186, 82)'; document.getElementById('displayed').style.backgroundColor = '#1FAB54'; document.getElementById('new-chat1').style.display = 'none'; document.getElementById('new-chat2').style.display = 'block';">Add New Chat</div> <div style="position: absolute; top: 5%; right: 2%; padding: 0.5%; font-family: Ubuntu; text-align: center; font-size: 2.5vw; color: white; cursor: pointer;" onclick="document.getElementById('chat').style.display = 'block'; document.getElementById('new').style.display = 'none';">Back</div> <div id="new-chat1" style="display: block; background-color: #fff; margin: 2%; padding: 2%;"> The name of the desired chat to be displayed. The default is LiveChat.<br><br><strong>Note:</strong> Changes made will only be initiated on program reload. <br><br><select id="browse" style="cursor: pointer;" title="Browse by chat name" onclick="localStorage.setItem('LiveChat-selectedChat', this.value);"></select> </div> <div id="new-chat2" style="display: none; background-color: #fff; margin: 2%; padding: 2%;"> First, enter the program ID that the new chat is posted under. <br><input id="prg-box" placeholder="123456789"><br><br> Second, enter the discussion key of the new chat, beginning with <code>kaencrypted_</code>. <br><input id="post-box" placeholder="kaencrypted_123abc456def789ghi"><br><br> Now give the chat a unique name to be saved by. <br><input id="name-box" placeholder="New Chat"><br><br><strong>Note:</strong> Changes made will only be initiated on program reload. <br><br><button onclick="localStorage.setItem('LiveChat-chatName-' + document.getElementById('name-box').value, document.getElementById('prg-box').value + ',' + document.getElementById('post-box').value); alert('Chat saved.');">Save</button> </div> <script> var browse = document.getElementById("browse"); for (var i in localStorage){ if (i.substr(0, "LiveChat-chatName-".length) === "LiveChat-chatName-") { var val = i.substr("LiveChat-chatName-".length, i.length); var newOption = document.createElement("option"); newOption.value = val; newOption.textContent = val; browse.appendChild(newOption); } } </script> </div> <div id="help" style="display: none; background-color: #1FAB54; padding-bottom: 20%;"> <img src="https://www.kasandbox.org/programming-images/creatures/OhNoes.png" title="Oh Noes, help me!" width="9%" style="padding: 1.5%"> <div id="join-chat" style="position: absolute; top: 5%; left: 9%; padding: 0.5%; background-color: rgb(83, 186, 82); font-family: Ubuntu; text-align: center; font-size: 2.5vw; color: white; cursor: pointer;" onclick="this.style.backgroundColor = 'rgb(83, 186, 82)'; document.getElementById('adding-new').style.backgroundColor = '#1FAB54'; document.getElementById('features-bugs').style.backgroundColor = '#1FAB54'; document.getElementById('help-chat1').style.display = 'block'; document.getElementById('help-chat2').style.display = 'none'; document.getElementById('help-chat3').style.display = 'none';">Joining the Chat</div> <div id="adding-new" style="position: absolute; top: 5%; left: 30%; padding: 0.5%; font-family: Ubuntu; text-align: center; font-size: 2.5vw; color: white; cursor: pointer;" onclick="this.style.backgroundColor = 'rgb(83, 186, 82)'; document.getElementById('join-chat').style.backgroundColor = '#1FAB54'; document.getElementById('features-bugs').style.backgroundColor = '#1FAB54'; document.getElementById('help-chat1').style.display = 'none'; document.getElementById('help-chat2').style.display = 'block'; document.getElementById('help-chat3').style.display = 'none';">Adding New Chat</div> <div id="features-bugs" style="position: absolute; top: 5%; left: 52%; padding: 0.5%; font-family: Ubuntu; text-align: center; font-size: 2.5vw; color: white; cursor: pointer;" onclick="this.style.backgroundColor = 'rgb(83, 186, 82)'; document.getElementById('join-chat').style.backgroundColor = '#1FAB54'; document.getElementById('adding-new').style.backgroundColor = '#1FAB54'; document.getElementById('help-chat1').style.display = 'none'; document.getElementById('help-chat2').style.display = 'none'; document.getElementById('help-chat3').style.display = 'block';">Features & Bugs</div> <div style="position: absolute; top: 5%; right: 2%; padding: 0.5%; font-family: Ubuntu; text-align: center; font-size: 2.5vw; color: white; cursor: pointer;" onclick="document.getElementById('chat').style.display = 'block'; document.getElementById('new').style.display = 'none'; document.getElementById('help').style.display = 'none';">Back</div> <div id="help-chat1" style="display: block; background-color: #fff; margin: 2%; padding: 2%;"> When this webpage loaded, you probably noticed a list of posts on the screen. You may even have seen several new posts appear. This is the <strong>chat window</strong>.<br><br>You probably also noticed that another window appeared at the bottom of the page, that looked just like Khan Academy. This is the <strong>post window</strong>.<br><br>To start posting comments, scroll down in the <strong>post window</strong> until you see a Tips & Thanks labeled <strong>'LiveChat'</strong>. Click the <strong>comments</strong> button, and scroll to the bottom of the comments list to where it says 'Comment on this tip/feedback'. <br><br>Now start posting comments, and watch as they appear in the chat window!<br><br><strong>Note:</strong> LiveChat is not responsible for rude or inappropriate posts. Please flag these comments for Guardian attention. </div> <div id="help-chat2" style="display: none; background-color: #fff; margin: 2%; padding: 2%;"> On the chat page, click on the <strong>New Chat</strong> button, then on the next page click <strong>Add New Chat</strong>. The first input box needs the <strong>program ID</strong> the new chat is under. When you go to a program, the program ID is the number on the end of the URL.<br><br>The second box needs the <strong>post ID</strong> of the new chat. On a Tips & Thanks, click the <strong>timestamp</strong> (it will say 'about 5 hours ago', 'about 3 months ago', etc). After the page has loaded, you will notice a long post key on the end of the URL. The post ID is the part starting with <code>kaencrypted_</code> and continuing on in a series of letters and numbers.<br><br>And finally, in the third box give the chat a name to be saved by. Then click <strong>save</strong>, and the data is saved to your machine.<br><br>Now reload the program, and click <strong>New Chat</strong>. Now click the dropdown of available chats, and the name of the new chat should be listed. Select it, and then reload the program a second time.<br><br>After it is done loading, you will be connected to the new chat!<br><br><strong>Note:</strong> To save data, this program uses <code>localStorage</code> which is allowed in the webpage environment of Khan Academy. To learn more, please visit the following link: <a href="http://www.teaching-materials.org/storage/">Client-side Storage</a> </div> <div id="help-chat3" style="display: none; background-color: #fff; margin: 2%; padding: 2%;"> <strong>Tested and works in these browsers:</strong> <ul style="list-style-type: none;"> <li>Firefox</li> <li>Chrome <em>(recommended)</em></li> <li>Chromium <em>(recommended)</em></li> <li>Iron <em>(recommended)</em></li> <li>Pale Moon (Mobile)</li> <li>Chrome (Mobile)</li> <li>Opera (Mobile)</li> </ul> <strong>Does not work in:</strong> <ul style="list-style-type: none;"> <li>Brave</li> <li>Pale Moon</li> <li>Tor</li> </ul> <br><strong>Versions:</strong> <ul style="list-style-type: none;"> <li>LiveChat BETA</li> <ul><em> <li>Released: 3/30/17</li> <li>+ Live chatting base-code</li> <li>+ Test features, most of which were added to 1.0 and some still to be released</li> <li>- Removed several bugs pre-1.0</li> </em></ul> <li>LiveChat 1.0</li> <ul><em> <li>Released: 4/4/17</li> <li>+ Support for multiple chats</li> <li>+ Support for adding new chats in-program and saving them client-side</li> <li>+ Help screen to learn how to use LiveChat</li> <li>+ Added post capping at 100</li> <li>- Fixed repeated posting bug</li> </em></ul> <li>LiveChat 1.1</li> <ul><em> <li>Released: 4/4/17</li> <li>+ Added welcome message to help first-time users</li> <li>+ Added create new chat message to help first-time users</li> </em></ul><br> </ul> <strong>Known Bugs:</strong> <ul> <li>Oh Noes interrupts with <code>javascript is taking too long to run</code></li> <ul> <li><em>Solution: Close Oh Noes and continue</em></li> <li><em>In Chrome/Chromium/Iron: Reload program</em></li> </ul> <li>Posting trailing dots formats text as a link</li> <ul> <li><em>Solution: None yet</em></li> </ul> </ul> </div> </div> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgJSX4duYCQw
Votes	211
Spin-Offs	36
Type	WEBPAGE
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	true
Restricted Posting	false
By Child	false
Author Nick	KonurPapa
Author Name	KonurPapa
Author ID	kaid_584500108259465016931971
Author Profile Access	PUBLIC

Archive Data

Added	1 years ago, 1734119953737
Updated	1 years ago, 1734119953737
Source Deleted	unknown