search

dorothealint / Rick-and-Morty

Digital Humanities project marking up and analyzing data from Rick and Morty
The Unlicense
1 stars 1 forks source link

Script Files Page Java Script #16

Open dorothealint opened 6 years ago

dorothealint commented 6 years ago

@quantum-satire So for that page that is "going to hold the transcripts and our markup", I'm thinking a deep blue background with a bunch of stars on it, each of which links to an episode script and changes color with the episode title popping up when the mouse touches it. I'm trying to write the code for the page now. I have the stars and how to use them as links figured out if this sounds good (and feasible) to you? I'm still having issues with spacing!

helvitiis commented 6 years ago

@dorothealint I think I'm having trouble picturing this--I had an idea as well, which I'll draw out for you on the board during our meeting (which could be tomorrow after class and Thursday if we need it, by the way!) If you have something put together already, are you able to send a screenshot of it here?

dorothealint commented 6 years ago

image Maybe screenshot? @quantum-satire I uploaded it as my javascript ex2 homework even though the javascript isn't working. I am not an artist. I can see things in my head but they do not translate to the 3rd dimension!

dorothealint commented 6 years ago

Each star is a link...to all the same episode in the github repo for the moment because I was trying to get the javascript to work. It starts on the solid star, all the outline stars are season 1, the pentagrams are season 2, the pinwheels are season 3, and I was going to put the shorts folder under the infinity. I thought the whole season could change color when you moused over a star from that season and a dialogue box open with the title of the script. It was a spiral/wormhole in my head. It didn't come out that way though because flexboxes.

ebeshero commented 6 years ago

@dorothealint I saw this thread, and took a peek at the homework you uploaded. I started trying to debug it and then realized you hadn't put everything into functions, and the JavaScript file looks unfinished (the case switches aren't plotted out, for example, AND they aren't inside a function). Remember, you're scripting out a sequence of functions. Your window onload gets things started, and triggers function init(), and your function init() is supposed to trigger a function named toggleHighlight, which you haven't defined.

Would you go back in and at least try to fill out the functions with the JavaScript syntax, following my model on the tutorial? It would help to simplify your code at first just for this homework assignment and use in the HTML @id values on your checkboxes and @class values on whatever it is you're toggling. (I would set an @id attribute instead of a @value attribute on those input checkbox elements, because JavaScript methods are designed to interact with @id and @class.) Please make sure the HTML text input area to click on is clearly visible (please don't give me black text on navy background: I can barely read it on the screen and my eyes aren't getting any younger and I'm swamped with paper grading, waaaah!) Anyway, if you'd please just try to clean up this code and make it readable, I think we'll be a lot closer to getting this working and you'll save me a LOT of rewriting in your files.

ebeshero commented 6 years ago

@dorothealint Okay--the HTML was baffling to me because of the miles of table cells used for positioning--that is really deprecated stuff. There HAS to be a better way. But the stars, by themselves, are just fine. I just figured out how you made them, just with &star;. Surrounding those with <span class="star"> is just fine, because it'll give you a handle-hold for JavaScript and the classList toggle.

You want your episode titles to show/hide on mouse-in or click of...the star? If you want each individual star to respond individually, you don't want to handle them all as a group. (That's what we're doing with <span class="something"> @class is meant to mark a collection of the same kinds of things--all the people, all the places, all the passages that involve a timewarp.

If you want something to happen on each individual star, and each star is associated with a specific episode title, what you need is something that acts on an @id attribute, and your HTML needs to have the episode titles already keyed in. You write CSS to make sure they are set to display:none; or display:hidden; so the text is there but the user can't see it on load of the page. You can then write a JavaScript function that says, when you select one of the set of elements, go and make its display be inline or block so it's visible. Read about the CSS properties here: https://www.w3schools.com/css/css_display_visibility.asp

I'm not really clear on the association of clickable star glyphs with titles. I had a sense that you were giving all the stars and pinwheels and other glyphs their own class, so that, when the user selects a specific shape on the checkbox form that I couldn't easily read, the computer goes and finds the elements with the corresponding @class, and is supposed to fire a classList toggle function like the one I describe in my tutorial. That toggle would do something to change the CSS properties of all the stars (if you click on the star checkbox)--and it could make a class or set of titles be visible if it were hidden (instead of changing a highlight color, etc.) Is that what you had in mind here?

dorothealint commented 6 years ago

@ebeshero I thought it would be neat (and fit the requirements for the homework) if each whole season changed color/highlighted when you toggled on one of that season -- each type of star is a different season. Beyond the homework, having the title behind the star the mouse is sitting on appear would be necessary for the project. Yes I know the tables suck! But flex boxes and me still aren't really getting along. That's going to be one of my summer projects to learn how to place without so much struggle before the fall class, when I don't have 4 papers and a project due and can spend the hours playing with them! The games work fine but the spacing doesn't always work for me in practice.