So where am I?


I have finally finished coding and testing the Monty Hall problem. It quite a while to squash the bugs. One bug in particular was a box being drawn on the canvas. I checked the code over and over and it looked like it should not be happening. It turns out that there are at least two ways of drawing a rectangle in HTML5 canvas. If you search the first one that pops up (google or duckduckgo) uses the .rect() method. The google search points to W3Schools and the duckduckgo points to HTML Canvas Tutorials. They use a .beginPath() and then end with the .stroke() method. It does result in drawing a rectangle. The problem is that it keeps drawing the rectangle. So if later you do a moveto() and then .lineto() to draw a line the rectangle comes with it. Now on both searches the second result points to information about the .strokeRect() method. In my code since I am creating animations I am controlling the persistence of the graphics so I don’t need canvas to manage that for me. It took me quite a while to figure out that the beginPath() option was causing me this problem. I have a function that calls drawbutton(). I call this multiple times at different locations. The weird part was that only the first call was being retained, the other ones did not. I looked at the code not seeing the problem. Had all the rectangles been retained I would have something to go on. When you have a draw loop running rather quickly it makes it difficult to step through the debugger. Once I realized it had to be that code I looked for a way to clear the path/stroke but could not find any options. It was then that I found the .strokeRect() method which does not need the .beginPath() and then I could finally get to coding the tracking of the results. So here is a finished screenshot of the game.

You can see that it keeps track of the wins by switching or staying. In this instance I had chosen to switch from 2 to 3.

I have a high school reunion coming up and got a digital copy of my class alumni directory. I had already scanned the individual pictures from the yearbook and I wanted to link those to the data. Today I wrote a python script to read the flat file and output JSON text. I then took that and dropped it into an HTML document and test that the object would work. I now should be able to write some code to link the photos with the data. I did notice that not all the photos have data and vice versa, so I will need to handle that. Once I am done I will have a single HTML document with the JavaScript embedded and then a folder with the photos. This way I will not need to have a web server running to display in a browser.