This week I need to update my website, specifically by creating a tutorial page teaching the users how to set up the extension. Since it is not offered through the official web store, it requires more setup than a normal extension would need. It also has a specific way it needs to be used, which will be explained on the tutorial page.
I ended up completing the setup tutorial. I had Luis test it and it was successful with some minor adjustments
Major breakthrough this week! I was able to get the popups fully functioning. What I changed was that I put the javascript back into its own .js document instead of having it inline with the html. I learned that inline javascript is seen as unsafe and unreliable, so Chrome actually blocks it in Chrome Extensions and prevents it from running. Now that it is in its own document and not inline it was able to bypass that security feature and function properly.
I also spent some time working on my website. I want to make a page where people can download the program so I added a button that downloads the .zip file when clicked. I am working on creating an instructional section to the page as well, as getting the extension to work can be finnicky. This will require me to redownload and set up the files.
I would still like to mess around with the formatting a little more, as the text displays off-center in the popups. While this isn't an important functional issue, it would look nicer if this was resolved.
There are other aspects of my website that also need to be updated, as they reflect the original goals of the project which have since slightly shifted.
This month, I was able to complete the majority of my poster. However, as my attention was split, I was not able to complete my extension. It is nearly done, I just have one issue with the cards not displaying correctly that should hopefully be resolved shortly.
My goal for this week is to get the popups working correctly. I’ve been playing around with the formatting, seeing if I could get anything to work but so far it has not been successful. I might need to bring it back into my code studio so that I can isolate just the one page that needs to be fixed.
This was a short week for me and I did not end up fixing the popups. Instead, I turned more of my attention towards my poster, as it is important for me to continue organizing the information I have collected.
My goal for this week is to get the popups in my extension working. Once this is done, I can reevaluate whether or not I will have time to conduct the experiment that I had planned. It would only take a week and the data should be fairly easy to analyze, so it is still a possibility. If not, I will figure out how to adapt my presentation to present the extension itself without any experimentation behind it.
Unfortunately I was not able to complete the popups this week, as everything I tried to change ended up creating more errors. However, I have discovered that service workers do not do what I need them to do and that I can just tell my users to open a separate window to run the extension on so that they can still interact with their computer without dismissing the application. This eliminates the need for a service worker/background script but does make use harder for the user.
This week I need to finish troubleshooting. The only thing I really need to fix is that the javascript and css are not displaying correctly in the actual extension. Once that is fixed, I just have to figure out how to do the popups and the program should be ready for me to begin collecting data.
This week was very productive. I got the program to display correctly and began the first stages of implementing the popups. However, I am running into a problem where the extension makes far too many popups---so many that it eventually causes the system to crash. The amount of popups seems to double every round.
I need to look into different ways to make the popups and how to stop it from making a million of them. I’m pretty sure that if I just use a different method to make the popup it will stop the issue. Also, I think the issue could be that each popup is creating its own popup every 60s, because they all run code identical to the original window. This would explain why the amount doubles every minute. I also want to make a new file just for the popup so that the correct flashcard displays. Another thing I might want to look into is just running a background script instead of attaching it to the main file of my extension so that a user can click off of the extension and still get flashcards. This might also need an on/off button so that users can turn the program off.
This week I plan to work out the kinks in my chrome extension. It currently doesn’t work at all but I’m hoping there are only one or two things I need to fix to get it up and running. Once it is working, I need to figure out how to get the pop ups to work. I definitely need to do more research on the popups, as the program I was hoping to use as a model does not function the way I thought it did and instead of having a popup it opens a separate tab with the prompt. I would rather not do that with my program, but I do still have it as an option in case I can’t get the pop ups to work.
At this point, I have still been unable to get the extension to display properly. I am not sure what is wrong, as it works fine in the website I was using to test the code. I will definitely continue to do more research and look at Chrome-specific implementations to try and remedy this issue.
My goal for this week is to finish up my main block of code. It shouldn’t take long, I just need to polish up some formatting and fine tune a couple aspects and it should be good to go. I need to reconsider adding other pages to my site as that will take much more time and I really need to try and simplify as much as possible so that I have time to collect data. I need to research the popups a little more and spend some time investigating the other extension that I downloaded, “Move It”, which has very similar functions as what I am trying to make.
I am, for the most part, done with my code, however upon putting it back into my manifest file to get it to work with the actual extension, I have found that it doesn’t actually work. I might have to reconfigure it to fix it but I don’t really know what is wrong, so more research is needed.
During January, I fleshed out my code, transforming it from a barely functional skeleton to something that mostly works as intended. I chose what questions I will be using for my testing and worked on integrating the javascript with the html and css. Overall, this was a very productive month.
My goal for this week is to begin incorporating the html & css that I have already created for my chrome extension with the code I’ve written. As of now, I don’t really know how to get them to work together so a research day may be needed to learn more about that. I also need to do a lot more work with my actual cards page, as it is completely empty right now and I don’t know how to get text from the code onto the html. Another project on my radar is finishing my quiz on google forms and adding in the questions I have added to my code.
When I added in the html and css initially it stopped my code from working whatsoever, but I figured out how to fix it by linking the code a certain way at the head of the html file. I also continued to do more research on the integration, as it is still not working the way I would like it to - the flashcards are displaying in the console but not on the website in html as they are supposed to.
For this week, my goal is to come close to finishing the code offsite, and if I get there I can start trying to integrate it into the html of the extension. Currently the code is not interactive at all and does not wait for user input to show the answer on the back of the cards, which is something I would like to add if I can figure out how to do it. I believe the main issue is that I don’t have anything with an ID on the screen to click on, but I also don’t know how to add graphical elements in the program I am using. I’d rather not spend the time learning a program that is just a bridge to my final project, however, and will probably end up just figuring that out on the fly when I start integrating the code.
One problem I ran into with my code is that JavaScript is asynchronous, so code does not wait for the line before it to complete before moving on to the next line. This is causing issues because my flashcards are displaying front1 front2 front3 and then back3 back3 back3 because the code to display the back has a delay on it and then picks up the variable the way it is at the time, after the loop has gone through to the last card. This is also causing issues with putting a time gap between each card, since as far as I know there is no good way to do that without switching to another language that I don’t know. Along with that, I switched my code over to another website as it has a larger display for the code for easier viewing and makes it a lot easier to write the code with the little predictive window when I type.
However, I have now made a breakthrough and figured out how to get the flashcards to display as they should, and now it will run through the whole list with time between the flashcards. At this point I am mostly done with this aspect of the code. I also chose my question set for testing. I chose obscure fun facts, as I wanted something that not many people would know just through common knowledge. Next week I will take a day to add these questions to the google form that I will be using to conduct my experiment.
My next step is to add the html and css into the program I am using and begin to make the website actually functional.
This week I worked on my code. It is still incomplete and I have run into many problems, where either all flashcards display with the same answer or they keep displaying over and over until the computer crashes. I also did some more research into different methods of adding delay to JavaScript code, as the method that was used in the source code I used was not working correctly and was leading to numerous issues with variables being messed up by the delay. Also, one day this week the program that hosts my code was down so I took the opportunity to read a new article about the effects of procrastination in learning habits.
During December, I created the skeleton of my extension. The coding is still a major work in progress, but I worked out the HTML and at least made a start. I also began thinking about possible experimentation to determine the effectiveness of the program.
For this week, I mostly just need to continue working on the code. I need to figure out how I am going to store decks, as I originally wanted to be able to make a new list variable for each deck but I am finding that I cannot declare a variable and make its name a string that was found from an input. I might end up with a slot system, where you can only have 5 or so decks at a time, and then the variables would be already declared and just named “slot1” or something to that effect.
I am still working on the code and am quickly realizing that I definitely need a refresher on my javascript, as I am not used to coding outside of code.org. Might need to look up a brief course on it. I think at least for now I will make a "lite" version without the ability to create new cards/decks, as that will take a while to figure out and I'd like to move on with the experimental section of the project sooner rather than later. I will pre-add the cards for my test set into the code and release a regular version later once the experiment has concluded.
For next week I want to figure out what subject material/terms my deck will include and begin making the pretest and posttest on Google Forms.
For this week, I need to make a mockup of the “Decks” and “Start Studying” pages. To do this, I need to first read through the documentation for the open-source program, “Anki” which I will be implementing in order to use their deck system and spaced repetition algorithms. Once the mockup is done, I should start thinking about how I am going to implement the code & I can make the framework of those pages in the HTML. I might need to do some more research to learn how to make dropdowns/buttons/other little formatting things, and I might need to find alternatives to them.
First of all, apparently Anki is written in Pystache and not in Javascript as I had anticipated. I do not know Pystache and it will not work on my program, so I am now on the search for another set of source code to use for my spaced repetition algorithm. If I can't find one, I don't think it would be the worst thing in the world to forgo the spaced repetition and use only timed repetition with random arrangement. Right now I am making a mock up of the flash card creation page in Code.org, and since it is in javascript it should be transferrable.
Goals for this week include working on the CSS and HTML. I need to figure out how to link between pages of the site and need to work on finalizing the formatting. I also want to see if I can use the same CSS file for all pages of the website. Whenever I end up finishing that, it might be worth it to spend some time messing with the CSS to make the program more polished. I also need to investigate how to change the size of the popup, since, as noted below, it is currently too narrow to properly fit the text.
This week I successfully accomplished my goals. I did some research and figured out what lines of HTML I would need to use to change the size of the popup*, so that is fixed now. I changed the font and the background color of the application as well. It isn’t very noticeable but it makes the interface look better. I also found out that using <link rel="stylesheet" href="style.css"> will let me use the same CSS style document for every page. At this point I have a framework including this that I use for every new page I make. The pages of the site all link to each other, although they are mostly empty.
*Found here, not exactly sure how best to credit in the HTML
My main goal for this week and a half is to learn how to incorporate JavaScript into my HTML manifest file and to begin working on the JS needed. First I need to figure out what program I will be coding in, and then I need to decide exactly what features I want my program to have. I also need to start working on the CSS so that there are actually buttons to press, but that might not happen immediately.
So far, I have learned that I can use <script> tags to incorporate JavaScript, or I can have it on a separate file and use <script src="js/script.js"></script> instead. I can just write the JS on a JS file on Notepad ++, no other programs needed. I did not actually begin working on the JavaScript because I realized that I need to have the formatting there before I can make it do stuff. I have decided what features I want my program to have, and I have outlined them in a Google Doc. I also have the very very basics of CSS and have made a lot of progress on the set of html files.
One issue I want to look into for next week is changing the size of the popup. Currently it is tall and thin, and I'd prefer it to be wider so it can actually fit the text.
^Google Docs mockup of features^
I finally have a basic working extension. Manifest document is started and the extension opens to show a simple string of text. My main goal for the next week and a half is to figure out how to include JavaScript in the extension and to start coding that.