Meet the Team and Interactive Org Charts in E-Learning (2019) #244

Nice job

Love the spinning wheel, such a nice call back to the reactor in Tony's chest. Works marvellously.

Wow, so amazing and fast! How do you always beat everyone to post first? lol

I for one welcome our new cyborg overlords!

Awesomeness! Love the job descriptions, and HR cracked me up! :)

"Your inappropriate response has been recorded" LOL

Nice! Welcome to the challenges Heather. Like your 'Friends' theme, but where's Gunther and Ugly Naked Guy? 😄

I think the trick with interactive charts and diagrams is planning your layout so that you can interact with each element easily and ensure that any new information is shown clearly. Definitely a knack to this and you're on the right track here.

I am surprised that Courtney is not on top! I sense a putsch around the corner... I like the colour scheme. I am no expert, but for this type of interaction I would remove the player buttons

Hi Heather, welcome to the challenges. I like your concept (and I'm the only person on the face of the earth who has never seen an episode of Friends or Seinfeld). If I may offer a few small suggestions--one thing might be to ensure your hover shapes are all sized consistently. When I was hovering it seemed like the circles had different shapes or sizes. Also, maybe try a closing trigger (like an "X") on your profile layers. It gives the user a second way to close the layer. And if you have the time, maybe insert an audio signal (like a click) for when the user chooses a person or closes the layer. I like audio reinforcement so that I know I did something. Best of luck on future challenges!

Just lovely, as usual, Jodi. You have a great eye for layout, which really shines in this task.

I love all the different layouts in the challenges.

Love the layout and colour scheme really makes the artwork (also gorgeous) pop! I can see your point about having the audio signal to illustrate the user has done something, and the background music ties in well. realy inspiring, thanks for sharing!

Cool demo. I think your link is wrong. This appears to be the correct one. http://jessicagrosman.ca/acmepeoplefinder/story_html5.html

I don't see a scrolling panel in your link or from the file. I tried resizing the browser to see if I could get one, but didn't.

I've published your story file and also no sign of scrolling panel.

You can inspect the element and check in the developer tools if the CSS overflow property is enabled. It can look like this:

textarea {
overflow: scroll;
}

To get rid of scrolling bar you can change it to auto or hidden.

Thanks for the help. I think it is a firefox issue.

Hi Tom, I like that this is posed as a question for a new team member, it's getting them to engage with the content rather than just read it, which is how we usually interact with this sort of thing.

Full disclosure: I'm totally going to steal this idea next time I need to do an Org Chart. Very good, thanks for sharing.

loved it

Love the overlay of the images associated with the hobbies, it's fun, looks clean and conveys the message!

Great design as usual, Andrzej! i love the colour change and illustrations when learning about the hobbies.

This is lovely. Interested whether you used the 'scroll box' hack to make the images float in within the frame, a layer with a cutaway, or if you've tucked the animations into the states for each image? Or even all three?

Fun visual concept!

I really like the bright colored backgrounds and the way the characters change pose as you hover over them. Very creative visual effects! You've given me some new design ideas to try - thanks!

Liked the layout and selecting the numbered groups, too.