Feedback on Gru frontend

  • List of all questions: As the question gets long, you have to traverse quite a bit to be able to open the next question, and then traverse again for the next one, because they all open vertically. Would be better for them to open horizontally. That way, the list of questions remain in place, and the bigger view is provided by the width of the screen and not the height.

  • I was able to set a negative score to -1.5.

  • The Hour is mixed with the zero.

  • Added questions shown is repeated info as the one on the right. The questions on the right should be ticked instead.

  • In select question to add to quiz, you have to tick on the box. You can’t tick on the question name. Also, there’s no way to view any more information about the question.

  • The positive score, the negative score and the tags should be visible in the list of questions, when selecting them for the quiz.

  • As you tick more questions to be added to the quiz, it should show the count of the questions in the quiz, and the total possible score.

  • When sending the quiz, the valid date can be automatically filled. It’s not something that we’d change too often. So, just a week should be sufficient. In fact, instead of asking for a date, just ask for how many days it should be valid for. By default, that can be 7.

  • When taking quiz, the instructions need to be modified:
    " The duration of the quiz is 60 mins. Timing would be clearly shown." – This depends on the quiz.

  • When showing instructions, have tick boxes next to them. And make the candidates tick each one of them before the “Start Quiz” can be selected. I think it’s a good way to ensure that candidates understand the instructions before beginning. Also, on a tick, the statement could convert to green, so it’s clear to them what’s happening.

  • Aah… Love the time left, and score on the top. Nice!

  • Mention that skip is zero score in Question stats.

  • Positive should be green. Negative should be red.

  • The question is single choice, not multiple choice. Also, use symbology to make things clear. You could show only one tick in 4 boxes, or 2 ticks in 4 boxes to show it maybe, just a suggestion.

  • I answered wrong, I got a positive score, because my negative score was negative. Double negative = positive.

  • I’d mentioned my name, but it just says “Hi ,”

  • Instead of saying, your final score is blah, you could show the same score visual that you’ve been showing all along, but put it in center, and make it much bigger. Also, show the total time taken.

  • When you’re in Gru Admin panel, you see the Question Panel and the Quiz panel. Why do you need the dropdowns for the same at the top? Seems repetitive.







1 Like

@Rahul-Sagore moved the feedback from another topic to this one. Please have a look and let us know your view about these issues.

Yes, need to change that. For better UX.

Need to make restriction on this as well, that’s the reason it was displaying “–score” on quiz taking page.

Yes, I knew about this, I had no efficient solution for binding “Added Question” to the right side panel. Need to implement with better approach.

This can be done.

This is good if we want candidate to read the instruction, but for UX point of view this is worst, and kind of annoying. If candidate reads the instruction, but forgot to tick the checkboxex, and try to starts the quiz, it will be annoying for him to tick each instruction for no reason. Candidate can still tick the instruction without reading it, so we can not make sure he reads it.
Instructions are crucial part, everyone should read it, so what we can do we can prompt user one more time before starting quiz like “Start quiz only if you have read the instructions.”. Or more better, have a instruction/help button on question page, which will open instructions in Modal window, user can read it any time during the quiz.

Can be done, but general sense of skip is you are ignoring question, so it won’t be counted. No need to specify explicitly. Another reason for not specifying is that, after user knows that skip has zero point, it won’t be helpful later on for other question, because it is static and won’t change through out the quiz.
We can put this point in “instructions”. Still let me know if this is needed in “Question stats”.

Did not understand about tick part. For single choice question, I displays rounded radio button (Only one option can be selected), and for multiple answer I displays squared checkboxes (Multiple can be selected). Let me know I’ll change it.

Cool, can be done.

It’s just the menu bar. Question panel and admin panel are on one page. But if you are on invite page or add/update question page or any other page, you need some global navigation bar which have direct links to the features. Else you have to go to panel again and again to switch the view.

Let me know if I wrongly interpreted any question.

The points which I did not mentioned are fixable. No need to discuss.

I think the point is to make them spend some time on that page. And having to tick each instruction is a good way to grab their attention at this stage, before they end up guessing answer to every question. I think it’s alright to be annoying if it gives a better chance for the candidates to read through them.

No, that part is alright. I meant, above the question you say “(multiple choice)”, when there’s only a single choice allowed. You need to fix that. The point about ticks was to show a symbol to represent whether a question is single-choice or multiple choices. The tick boxes you’re talking about are in the options. I’m not talking about them.

Okay totally missed that part, about “Multiple choice”, currently it is hardcode, will change that.
And will add checkboxes on instructions page.

Deployed the updated version.

Some comments on where we are right now and on other things pointed out earlier. Most of the issues pointed out by @mrjn above have been resolved except.

@Rahul-Sagore probably didn’t get to this yet.

I was thinking we can leave this as the date and auto fill to a week from now on the frontend. If we keep it as days, it becomes a bit of a mess because we anyway store validity as a time.Time and when you try and edit the date, I have to calculate stuff.

This has been done, but I feel there should be one box/section. Like one for general/scoring etc. Otherwise, there are really too many boxes. Or maybe it’s because I have been testing so I feel there are too many.

There are some other issues that are tracked on Github Issues https://github.com/dgraph-io/gru/issues.

Now a couple of things which are left.

  1. I have handled client crashes. I am not sure if I should be handling server crashes. Currently, the server can crash if Dgraph crashes and we aren’t able to contact it or there is a logical/runtime error. I am not exactly sure if we should be handling server restarts. Any ideas @mrjn?

  2. Use Dgraph schema, especially scalars so that we get types for free.

If you’re unable to contact server, you should retry, either indefinitely or using timeouts. No need to crash. And client should tell the user that server is taking too long to reply back, so the user knows what’s going on.

Ok. I will make this change.

Btw Gru is live on https://gru.dgraph.io using Caddy. Give it a try.

Some issues that were pointed out by Manish.

Add/Edit questions page

  1. Is correct next to options has a ? which toggles on selecting the option. We should get rid of that.

  2. Can still set negative score. This was fixed earlier but is back again. [/s]

  3. Support for multiline options.

  4. Divide the page into two halves. Show a view of how the question would look to the candidate taking the quiz.

  5. Option to add internal notes for a question (essentially another text box).

  6. Option to Cancel the changes apart from Update which would essentially take you back to the index page.

  7. Weird box around options.

Questions Index page

  1. The question name occupies a large width of the page, hence a lot of the space is empty. It should occupy not more than 10-15 %.

  2. Since the question text is of variable height, we should have the Positive, Negative score and tags above the question text. So that they remain vertically at the same position while the user navigates across different questions.

  3. Option to filter questions by tags/name. Maybe have a list of all unique tags at the top. Clicking on anyone should filter questions by tags.

Quiz edit/create page

  1. The questions part of the quiz can just be indicated as ticked boxes on the right. No need to show them twice.
  2. Two issues with the max score possible. 1st it just sums up all the scores from different question without taking into account if they are multiple or single choice. For multiple choice you need to add (num_correct * positive). Another is that it should round of the score to one decimal place, so that 17.5 doesn’t become 18.

Candidate add invite page

  1. Validity text is still visible behind mm/dd/yy. Also auto fill validity a week from now.

All candidates page

  1. Ability to sort by the time when the invite was sent, score, percentile.

Quiz Instructions page

  1. The green colour on ticking the instruction isn’t really green and is more of a tiffany colour. Change that to green.
  2. On rendering a new question, the time taken is reset to 0 sec with a bit of lag. Check why is that.
  3. Have an option to give feedback at the end of the quiz.

Work for backend

  1. Shuffle qns, answers.
  2. In the mail send to the candidate that till when is the quiz token valid.
  3. Send link of the report instead of the tabular report once a candidate finishes taking the test.
  4. Handle server crashes.
  5. Handle Dgraph crash. Auto restart Dgraph.
  6. Add a proper README.
  7. Minify static assets using the web server.
  8. Add a favicon for Gru.
  9. Expose API to submit feedback after the quiz.
  10. Add option for adding Internal notes for a question in Add/Edit question API.
  11. Record time_sent for quiz invite and send it in candidate index page so that we can sort by it.
  12. Send server and Dgraph logs to papertrail, so that we know if there were any crashes.

The idea is to fix the essential ones, so that we can start using Gru for actual quizzes from next week.

Also, another interesting thing came up that we really don’t need to all this REST stuff on the backend. Essentially we just get data from frontend and pass it to Dgraph and return the JSON response. We could just have one method on the backend which would authenticate the user, proxy the query to Dgraph and return the result to the frontend. That way, the backend would become much more simpler. Most of the queries and mutations for the Admin panel could then be moved to the frontend itself. @Rahul-Sagore we can get on a call and you can explain the frontend design to me. Then I can help you port this stuff out to the frontend.

2 Likes

Thanks Pawan! This is an excellent summary of our discussion.

1 Like

Added UI for this.
Which API endpoint I will use to store this? Is that ready?

This would be a good opportunity to build the proxy endpoint, @pawan

Update: Didn’t want to digress the discussion – but I realized we’ll have to be a bit careful with the proxy endpoint. Ensure that the candidate can’t retrieve the actual answers for the question using GraphQL. Some predicates would have be banned in the proxy.

1 Like

Adding some more issues @Rahul-Sagore apart from the ones above and those on the Github Issues.

Critical Issues

  • Update Ping correctly, more ideas here. https://github.com/dgraph-io/gru/issues/69

  • Send none value for notes by default from frontend if user doesn’t enter any value for it because the backend expects some value.

  • Remove hamburger menu totally. Also related to https://github.com/dgraph-io/gru/issues/74.

  • After the change of having multiline options, there is weird behavior with options on a quiz. They change position when rendered as part of a question while taking quiz on gru.dgraph.io. Also, can see space as escaped character.

  • For question whose text is long, it doesn’t wrap in quiz inside the gray box.

  • Try to turn off Wifi while candidate is taking the quiz, see what happens, a cross is displayed. The behavior should be changed after implementing Ping correctly.

  • Options don’t actually use the markdown conversion, same as question does.

Other issues

  • The colour of the notification is red when it should be green (e.g. Candidate Saved successfully). Is this based on the value of the Success key from backend?

  • When admin is logged into Gru, and tries to go to /, first the navbar header
    has a blue colour, then for a fraction of a second you see username, password box and then
    the dashboard. Its like three views are rendered one after the other. That produces a bad effect. Related to https://github.com/dgraph-io/gru/issues/77

  • Authorization header shouldn’t be hardcoded anywhere on the frontend. Its hardcoded for the get-all-tags api right
    now at line 330 app.module.js.

  • On add/edit quiz page why do we show selected questions both as ticked as well as above submit. Same issue with candidate invite page. Quizzes he is invited for is repeated information. How about just
    having a select box with autocomplete but only one option selection possible for selecting quiz.

  • If candidate scores negative report circle still shows green.

  • Sometimes can’t see the tick in add/edit questions and other pages. Just the box gets a red highlight.

Let me know if something isn’t clear. The aim is to fix these on the weekend, so that we definitely start inviting candidates from Monday.

1 Like
  • Question and Answer is a bit misaligned. Answer is left to the question, and has bigger fonts.
  • Should be called Dgraph Quiz.
  • Total time left.
  • Time spent on question.
  • Also, did you want to show that the answer was wrong or right? In fact, we could show that by doing a small flash in the score window, a green or a red flash, or something, or just animate the addition there. Just an idea, not that important.
  • Give your valuable feedback feels a bit sarcastic. Say, thanks for taking the quiz. We’ll get back to you regarding next steps. If you have any feedback for us, please let us know by writing it here.
  • Editing a question in the list of all questions, would then change the view to show the top question, instead of showing you the question you edited.
  • Note should be at the bottom, not the top. Again, note can be of indeterministic length, and it’s just a note, like a P.S. Not so important that it has to be at the top.
  • Can’t view invited candidates, but can see invite link at the top. That belongs to the quiz view.
1 Like

Some other issues to consider.

  • I was trying out our actual interview questions, which have code samples too. I discovered that markdown doesn’t preserve indentations on different lines and makes for bad rendering. @Rahul-Sagore can you check if there is a way for it to preserve spaces/tabs.

For e.g. Here (discourse) If I enclose something within a pre tag, see source of this post, the formatting is preserved. We should definitely have something like this for our questions. Or else we can’t have questions which have code.

MergeSort(arr[*], l,  r)
If r > l
     1. Find the middle point to divide the array into two halves:  
             middle m = (l+r)/2
     2. Call mergeSort for first half:   
             Call mergeSort(arr, l, m)
     3. Call mergeSort for second half:
             Call mergeSort(arr, m+1, r)
     4. Merge the two halves sorted in step 2 and 3:
             Call merge(arr, l, m, r)
  • Complete candidate report to show correct answer/answer by candidate.
  • Gru in the top navbar points to the admin page. It should point to nothing or maybe the Github repo for Gru but definitely not to admin, because it is visible to the candidates.
  • Gru quiz html page doesn’t have a title. Also there is a title in the code Gru-Ui - Test. We can just change it to Gru.
  • Meta tag has no description. Maybe have something like Gru is an open source adaptive test system for screening candidates for software engineering roles. It helps us identify and recruit the right minions.
  • Have Dgraph Labs as author in meta tag.
  • Maybe have a custom 404 page.

Good to have

  • Have some sort of one line description about Gru on https://gru.dgraph.io above login. Also a link to the Github page maybe.
  • Check Google pagespeed and improve the score.
  • Maybe server js/css from Cloudfront/S3.

Started adding actual quiz questions to Gru. Observed some issues which could become a blocker.

  • On questions index page if there are more than 20 questions, then clicking on question 20 onwards takes you to the Dashboard page instead of rendering the question in the right panel.
  • Question markdown doesn’t support bold text with **bold**.
  • In actual quiz, options take more than a line of space (atleast 3 lines) irrespective of their size which is bad and wastes a lot of real estate.
  • A simple search on questions index page based on question name would be very useful. Something like what you have on quiz add/edit page.
  • While adding question/option text the line should wrap at the boundary of the box. Else the text gets out of view.
  • Some question text in markdown isn’t rendered properly. I can share screenshots with you @Rahul-Sagore.

These issues are important and need to be resolved before we can actually start using Gru to invite candidates.

While adding some tag-related data to question, Dgraph crashed on me in Gru with error.

Oct 26 04:39:30 ip-172-31-32-163 dgraph[2417]: 2016/10/26 04:39:30 query.go:311: prev: map[_uid_:0xac2ad81059cd4026 name:datastructures] _uid_: 1240596568828

This is with an older binary, but I am updating the binary to the latest one now. The problem would be that all the data added previously becomes corrupt. Server crashes on this query.

Also would be great if we can trigger a leader election instantly in a single node cluster.

We should also not log.Fatal if the user doesn’t provide the ICU file for the embedded binary.

Did this. And also fixed the out of range bug that you had found. Both pushed to master.

Thanks, now adding questions again. Should be done in an hour if everything runs fine.


Update - Added questions for actual quiz. Things seem to run fine. Also copied over the posting folder after adding all questions so that in case we lose something/data becomes corrupt, I can use the folder and don’t have to add questions again. Once @mrjn verifies that questions are rendered properly, we can start inviting candidates.

I am going to now work on uploading logs to s3 which is very important to know what crashed and why incase there are crashes.

Some issues on the frontend for your reference @Rahul-Sagore

  • Question/Add Edit page options editor not initialized without refreshing.
  • Question text preview is different from what is shown on the questions index page. Can we make it same? I see something else in the preview tab and the actual question content after saving.
  • While taking quiz , scroll to top after user clicks submit for a question.
  • Clicking on invite for a quiz should auto prefill the quiz name.
1 Like

Just took the quiz. Definitely looks a lot more polished and closer to the real thing. So, good job!

  • First screen doesn’t say anything about Dgraph. Just says GRU. There should be a way to say something like GRU - Dgraph Screening Quiz.
  • The duration of the quiz is 1 hours, 0 minutes, 0 seconds. Really? You can just define it in minutes: 60mins.
  • Mention to candidates that we recommend using a pen and paper to help visualize some of the questions.
  • On a window resize to a smaller width, the scoring goes all the way to the bottom of the screen. It should be above the Question.
  • The time left, time spent and score seem erractically positioned in smaller widths. They should be vertically aligned in separate rows. (Actually, these are the sort of things that one would expect a UI engineer to auto-detect.)
  • Too much vertical space is wasted. So much so that on my Thinkpad, I can’t see submit, without scrolling. GRU logo top can be completely ommitted. Then the empty vertical space between Question and “Dgraph quiz” can be reduced. “Dgraph quiz” itself can be pushed closer to the top.
  • Why is negative scoring shown in orange. It should be red. Also, the terminology should be: CORRECT +5, INCORECT -2.5, SKIP 0.
  • Something happens when you open developer tools. The timer stops responding, and the clicks don’t happen. Also, no network activity is shown – is this by design?
  • Also, dev tools shows some errors, in particular Uncaught TypeError: Cannot read property ‘t’ of undefined.
  • On a reload, the quiz just ended!! Unless, I coincidentally somehow did that on the last question.

Thoughts on Questions (I’ll take a look at all the questions and fix these):

  • complexity with the O(n) solution is a puzzler. It doesn’t test for anything.
  • Latency Q has too high of a score.
  • Change the Q about busy waiting and polling.
1 Like