Live CEOing Ep 796: Design Review of Question Framework Features

Transcript of a design review meeting (recorded April 29, 2024) led by Stephen Wolfram and colleagues discussing a design refresh and new interfaces for the Wolfram Language question/assessment framework (targeting version 14.1). The discussion covers UI refreshes, new interaction types (pixel-location "Qlik location", labeled locations, drag-to-categorize, drag-to-order, and several fill-in-the-blank variants), authoring/authoring-notebook workflow changes, and suggested UX improvements (visual/hover feedback, cursor affordances, tooltips).
Chapters
Hey. Hello everyone. Welcome to another Wolfram language design Review for version 14.1. Let's see, we are looking at question objects. And what's the main point here? Is this design refresh or something different?
Design refresh of the existing interfaces and then new interfaces. So there's a couple sections here. Okay, so this first section is the existing interfaces that we've had for a couple years and just sort of refreshing the look, making it a little bit nicer. You know, when we first put it out, we wanted to get the functionality out there and didn't really spend as much time.
I mean, I don't have an opinion about these. It looks fine. I mean, one is bigger than the other, but I don't know what that means.
Everything got a little bit bigger, fonts changed a little bit. The, you know, the check marks and stuff are. That screenshot on the top one is inaccurate. That's not actually what it looks like now. I think the. It must be front end resources that are auto updating there. Okay, so right, the, the button.
Is this what happens automatically or is this the show explanation thing?
That's show explanation. It. It starts closed and we open it up.
Right.
It should work in there, even if you want to play with it. Yeah. So multiple short answers. You know, this is much nicer looking. The buttons before were kind of crazy small and now it's nicer.
Right. It's.
It's reverse closed if you want to see the code. Why is it slow?
What's happening? Is this, is this supposed to work or not?
Yes. Yes. I don't know why it's slow.
Why was it so slow?
It shouldn't be. I mean, it's doing an entity value. It's doing interpreter of planet.
Oh, yeah, okay.
But that, Okay, I, I don't know. Maybe that goes to alpha, I guess, but it shouldn't be slow even if it goes alpha. Right, And right. Multiple choice grid. We used to have the values here. We're just like.
This is. This is copy pasting a. A assessment result object.
Assessment result object. The code is there. It's reverse closed that cell if you want to get the.
Yeah, okay, but what am I supposed to copy? Paste this into.
A notebook? This will from language content. So, okay, right. So this one kind of always looked ugly because the values are repeating. So now we're just turning them into column headers, which works pretty well if you scroll down a little bit more.
That's reasonable enough.
Yep. All right, so that's just sort of the refresh of existing interfaces. And then we have new interfaces. So we have one that we name qlik locations that we've talked about for a while where you give the background image. And the solution to the question is pixel locations in that image. So it's just an interface for choosing pixel locations.
And how does the marker. Can I try it?
Yeah, the. So, oh, did you delete the definition of stoplights and points in this? It's broken in 14:1. Well, yeah, I mean getting. So we used image cases to get the points and there's a bug with image cases right now. There was code in here that generated it, but we could have faked it. So obviously stoplights and points is not defined.
I can I see. Okay, how do we.
See you later.
Yeah. How do we see the thing on the image? What color do we use for an image?
But Right, so. So that's one thing it says right there. Work in progress adding custom locators. Right now there's one on there on the right stoplight and it's black and you can barely see it. But Billy has a spec for a locator that has like, it's kind of, I don't know, black with a white shadow, white with a black shadow. I don't know how to what the right terminology is, but it has black and white and you can see it pretty much on any image.
Do you believe in that, Jeremy, Billy, et cetera. Do you believe in that claim?
Yeah, I think that fits what we've done.
Okay.
I'm sure you could have some sort of contrived really small chessboard image where it's bad, but any real image is going to be fine.
Any real image. This thing is sufficiently unreal that you can see it against a real image.
Right.
Okay.
And then this one, which we're called. Oh, yeah, this is. This is the labeled version of Qlik location. So that one above was unlabeled. It's, you know, just click all the. Some things in here and this one, each item has its own name and you have to drag them around. Obviously we have issues with the width here that Camilla's.
Is that an issue in this particular case or is that a general issue?
I think it's a general issue for. For this interface. Right.
Do we know how to solve it or not?
Yeah, that's an issue for that example, but it's working properly on other examples.
Okay.
Yeah, I think we can. I think we can find a solution by, you know, we're sort of inspecting the content and sizing intelligently. And then this is the Next, new interface that we call drag, categorize. So all the items and you can evaluate this one. This doesn't depend on anything else. So all the items start in this, what we call like the default zone in the left. And then you drag them into the proper category.
Not a lot of great feedback here. And I guess I'm just dragging it and it's sitting there. I guess that's.
Yeah, yeah, the colors.
Now when I click it again, when I just click there, it's going to.
Give you the weird.
I mean, at least the cursor should change. Do you see what I'm saying?
Right.
At least when you're dragging, when you're over one of these things, I would think you should have a different cursor. I don't know what cursor should be, but it should be different. Just so it's like, hello, I'm. I'm paying attention to you.
Okay.
Does that make sense?
Yeah, it makes sense.
Probably the hand, right? I mean, that's what you're using at the top there to kind of indicate.
What you need to do. Okay.
Yep, that makes sense. Nice.
Yeah. Okay.
Yeah. And then here's another case where you are specifying custom labels. So if you. You can. Again, the input is reverse closed, so you can see that there's this labels property in the question interface, which is different. So it's not just taking the string owl from the assessment function like the one before. It's using a custom.
Yeah, I get it, Bob.
What happens if you straddle the line? Do you get any feedback of which zone it's in?
I. I think it's going on the center. Is that right, Camila? Or is it? Yeah, but there should be feedback. You're right.
Some hover of, you know, some highlight of the area you're about to drag into. It'd be nice.
Yeah, yeah, yeah. That would be a good thing for all of these. Look, in this case, as you drag here, the whole prime area should kind of light up.
Yeah.
Yeah.
And that way, you know, if you're dragging on a boundary, one of them is going to light up and the other isn't.
That's a good idea. I, I'm. We will work on it. If we can't get it into 14 1, we'll do it on the next one because that might mean a significant change of the implementation.
Okay.
This is one that came straight out of cbm, so this is one they use already, and we're basically reusing their code and putting it into the system properly. With, you know, but I think it.
Could do with again some more visual feedback as the thing is clicking into place. I really think you need to flash things to indicate where it's going, etc, etc. Etc. And I think this is sort of standard UX technology. I mean the functionality is nice, but I think you really need more. You know, I can't tell what's happening there. Right. So I'm moving this down and somehow it's very obscure that that just went in that place. I think there's some Noah, I mean somebody. I think there's some simple UX that will help this. I don't know what the usual way of indicating that you have finished your action on a list reorder, but whatever that is, we should, yeah, I'm trying.
To think of what it is, but I, but I, I, yeah, I can find out.
Okay.
Again, I think that a hand again would probably help here as well for the mouse cursor.
Yes.
And then we have these three fill in the blank type ones. So one is what we call text completion where you just type in and you know, straightforward. You can have multiple, these just show one blank, but you can obviously have multiple blanks. And let's see. All right, this is just showing a slightly more interesting example example with the bear.
Okay.
And then the second fill in the blank is what we call select completion, which by default is drop down menus.
I see. Okay.
All right. And the important thing here is not so much the interface, the controls on the interface. But you know, in this case the teacher is providing a set list of possibilities for each field. Right. So.
Let'S give choices directly.
Right. So in the first one, the values here are inferred from the assessment function. This one, the only thing in the assessment function is the correct answer. So you have to tell it what. And then you, so then it can be ragged. It's not always four and four, you know, not always the same length. And then here's something with no assessment, just showing custom labels.
Okay.
And then the last fill in the blank is this one that's similar to that drag categorize we had above. But wherever. Where all the values are in this sort of default zone to start with. So here, you know, it's, it's one common set of possible values instead of each field having its own set of possible values.
I see.
Right. And you, and you just drag them in.
This is all quite nice.
Yeah. And then the, you know, I guess I, at the beginning of the year I said there were two main sections Here there's really three main sections, and next one is this big project that we started a couple years ago that I was focused on for a while, but now I've handed off to Camilla to completely overhaul the authoring environment for these question objects. And if that. That code should work there. It's, you know, it's in the question framework context now, but we have this, you know, multiple notebook. Oh, no, I guess it doesn't. Okay. That was just merged on Friday. I'm sure there's.
All right.
So now we have this multiple notebook paradigm where there's like what I call the quiz notebook, but that's not really what we call it. And from there you launch independent notebooks for single questions, and then they collapse back into the quiz notebook. So this is a screenshot of like, notebook for an individual question. And you can. And you can see.
Why are these separate notebooks? Why are they not opening up within one notebook?
Because it's horrendously complicated. Complicated to make them like sections in a notebook.
I see.
Yeah, that's how. That's how. That's what we tried to do the first time, you know, maybe four years ago with. When Steven Schroeder implemented this. And we, we tried and it, we just. It was very difficult. But now. But with this, once we put it into a second notebook, it makes it much nicer. And we have this template selection button at the top is sort of what takes. And I don't love that terminology, so if you want to brainstorm that, that might be helpful. It basically takes plain text content and turns it into something that will either be. Either have random variables inserted into it without changing the formatting, or it will have random values inserted and then evaluate.
What do you mean? I mean, how do you say which is which?
There's so. So if you see in the. There's that little drop down that little arrow on the right where I wish this would. So there's two inline blobs in this notebook. What is the derivative of blob? And that blob has a tiny arrow on the right side right there. So when you click that, it would say insert values or insert and evaluate. And you can choose.
I see.
And there's that. That little icon on the left there, which, you know, it's very tidy, but that is supposed to mean insert. And then the blob down below in the correct answer field, that tiny icon on the left is supposed to mean insert and evaluate. There's like a tiny arrow down and tiny arrow. Right. So it's very minimal. And so people will just have to learn what they mean because it's hard to, like.
Right.
Convey it. Right.
Well, how about tool tips? I mean.
Oh, yeah, of course. Tool tips as well. Yes. Yes.
All right. This is looking nice. I would love to not continue if we don't need to spend more time here.
Okay.
Yeah. If you don't see anything that we're.
On the wrong place, this is looking like it's going in a good direction. I. I don't know what. I'd like to see this when it's in more final form, but this is going to be, I think, a big win.
Yeah, I think so, too. I thought this was going to work for you today, but we'll figure out why it doesn't. Like I said, we just merged it on Friday, so not surprising that it's not working.
All right, good stuff. Well done. Very nice.
All right.
All right. See you all soon. Bye. Bye.
More from Guy

Cheryl Strauss Einhorn | The Human Edge: Smarter Decisions in the Age of AI | Talks at Google

Rachel Glennerster | Innovation and the Center for Global Development | Talks at Google

Rebecca Winthrop | Rethinking the Purpose of Education in the Age of AI | Talks at Google

Dr. Robert Wachter | A Giant Leap: How AI Is Transforming Healthcare... | Talks at Google






