MikeMirzayanov's blog

In Problems Statements, Example Inputs Are Now Highlighted if Test Cases Are Used
By MikeMirzayanov, 2 years ago, In English

Hello, Codeforces.

Look what an interesting thing I've been working on the last few days. Now, if a problem uses test cases and its validator is written in the recommended way (using setTestCase), then the example inputs are displayed using different colors.

Just follow the link and see how beautiful it turned out: https://mirror.codeforces.com/contest/1714/problems!

So far I have enabled this only for the last few rounds, but if everything works as intended, I will enable it for more rounds.

In order to support this, I had to tinker a lot. I made changes to testlib.h so that the validator can return test markup. Support for this markup required changes in various system services. But I think it's worth it!

The coolest thing is that it was possible to implement all this without changing existing problems. If a validator is used using the setTestCase feature, then this improvement can be applied to this problem.

Of course, it would be cool to have similar highlighting in example outputs as well. And even, say, synchronously highlight an input-output test case pair when hovering over. Unfortunately, standard checkers are often used, in which information about test cases is lost. Perhaps I'll apply some heuristics to make it work in most cases.

  • Vote: I like it
  • +3167
  • Vote: I do not like it

Comments Comments (72)
| Write comment?
»
2 years ago, # |
  Vote: I like it +13 Vote: I do not like it

Uiiii

→ Reply
  • »
    »
    2 years ago, # ^ |
    ← Rev. 2   Vote: I like it +10 Vote: I do not like it

    Hi MikeMirzayanov, thank you, this is awesome and I would suggest adding this feature: if you have a set of test cases and you only wanna copy only one of them, you just click on it with your mouse pointer. What do you think about this idea?

    → Reply
    • »
      »
      »
      2 years ago, # ^ |
        Vote: I like it +11 Vote: I do not like it

      And don't forget to add the number of the test cases:1.

      → Reply
»
2 years ago, # |
  Vote: I like it +29 Vote: I do not like it

Ah yes I can relax my eyes

→ Reply
»
2 years ago, # |
← Rev. 5   Vote: I like it +88 Vote: I do not like it

sigma_g can u plz update your dark theme extension according to it?

link

→ Reply
  • »
    »
    2 years ago, # ^ |
      Vote: I like it +18 Vote: I do not like it

    Also This is good.

    → Reply
  • »
    »
    2 years ago, # ^ |
    ← Rev. 2   Vote: I like it +4 Vote: I do not like it

    I'll try to update my dark theme tomorrow if you want to use it. (Check my blogs)

    → Reply
    • »
      »
      »
      2 years ago, # ^ |
        Vote: I like it +20 Vote: I do not like it

      It was a quick fix, so I did it now. Should be working.

      → Reply
  • »
    »
    2 years ago, # ^ |
      Vote: I like it 0 Vote: I do not like it

    Hey! Very sorry but I am not actively using CF anymore. I was notified of this issue on GitHub by two helpful community members last week (https://github.com/GaurangTandon/codeforces-darktheme/issues/46) and I had then immediately patched the issue. Please re-install the theme if you didn't get the updated version yet.

    Thanks to all of you for using my dark theme for so long, and hopefully this fix will help you to continue using it for longer! :-)

    If you ever face any issue, please notify me on my GitHub repository, and I will do my best to fix it asap.

    Cheers!

    → Reply
»
2 years ago, # |
  Vote: I like it +15 Vote: I do not like it

Amazing, sometimes when the test cases are pretty long it was a bit hectic in identifying particular cases and now this feature is just a life savior! Thanks a lot. Orz

→ Reply
»
2 years ago, # |
  Vote: I like it +54 Vote: I do not like it

The highlighting is cool. But I have just discovered this breaks test-case parsers like https://chrome.google.com/webstore/detail/competitive-companion/cjnmckjndlpiamhfimnnjmnckgghkjbl?hl=en-US .

Would it be possible to keep the old data around so it still gets parsed? Otherwise we would have to change the extension (not sure who maintains it)

→ Reply
  • »
    »
    2 years ago, # ^ |
    ← Rev. 3   Vote: I like it +83 Vote: I do not like it

    I just released Competitive Companion version 2.35.3 which fixes this issue. The update has already been published on GitHub Releases and Mozilla's AMO, and is pending review on the Chrome Web Store.

    Edit: the update is now also published on the Chrome Web Store. Depending on your browser it may take up to 24 hours for the extension to auto-update, or you can force it to update by re-installing the extension.

    → Reply
»
2 years ago, # |
  Vote: I like it +15 Vote: I do not like it

This is great! Now it will make it quicker to copy and paste a specific test case that is giving wrong output.

Do you by any chance have a plan to add test case numbers as well? (outside the input/output boxes) I think this will make it easier to see which input maps to which output.

→ Reply
»
2 years ago, # |
← Rev. 2   Vote: I like it +4 Vote: I do not like it

awesome update! It's clearer to find out every single test case.

→ Reply
»
2 years ago, # |
  Vote: I like it +6 Vote: I do not like it

WoW,now it will be much easier to distinct each test case

→ Reply
»
2 years ago, # |
  Vote: I like it 0 Vote: I do not like it

This is a good feature hope you also add an option to turn it off or on as some test cases contain one line input output so normal one looks better here but for problems where a graph or multiple line input are there then this feature will be really awesome.

→ Reply
  • »
    »
    2 years ago, # ^ |
      Vote: I like it +8 Vote: I do not like it

    I agree there should be an option to turn it off or on (near the test cases) so that one can turn it off or on whenever he/she feels like

    → Reply
»
2 years ago, # |
  Vote: I like it 0 Vote: I do not like it

Great This format helps B/w is this color pattern was inspired from atcoder??

→ Reply
»
2 years ago, # |
  Vote: I like it +8 Vote: I do not like it

lol I saw this on a problem a while ago and originally thought my display was glitching, love the update though thanks mike :D

→ Reply
»
2 years ago, # |
  Vote: I like it +10 Vote: I do not like it

For people who prefer dark mode, this one works perfectly with this update and overall — Dark Reader

→ Reply
»
2 years ago, # |
  Vote: I like it +5 Vote: I do not like it

Amazing, coz when test case contains multiple lines it sometimes becomes difficult to distinguish, this new feature will surely be a great help.

→ Reply
»
2 years ago, # |
  Vote: I like it +8 Vote: I do not like it

Is it possible to do the same thing for the output (so it matches the input)?

→ Reply
»
2 years ago, # |
  Vote: I like it +31 Vote: I do not like it

Stripeforces

→ Reply
»
2 years ago, # |
  Vote: I like it 0 Vote: I do not like it

Great! I can see the example more clearly

→ Reply
»
2 years ago, # |
  Vote: I like it +5 Vote: I do not like it

Do we have an option to enable (or disable) it in mashups? Me and my friend were trying to think of problem ideas to make a CF round and one of our problem candidates were prepared and put in a mashup and a test case it looked like

this (I don't want to spoil the problem so some of the test cases are covered)

Is it that Mike decided to secretly enable for mashups? Because he said in above that it is only enabled in the past few rounds.

→ Reply
»
2 years ago, # |
  Vote: I like it 0 Vote: I do not like it

An indeed feature/improvement, I liked it!

→ Reply
»
2 years ago, # |
← Rev. 2   Vote: I like it 0 Vote: I do not like it

Very good initiative. But it would be great to have a official dark theme also. Best Wishes ❤️

→ Reply
»
2 years ago, # |
  Vote: I like it +1 Vote: I do not like it

Beneficial update! It increases my quick readability of test cases. Thank you.

→ Reply
»
2 years ago, # |
  Vote: I like it 0 Vote: I do not like it

great works. in my opinion, honestly, if the number of cases on the first line is displayed with other colors(or in other ways such as bold) which differ from real data would be better.

→ Reply
»
2 years ago, # |
← Rev. 2   Vote: I like it +16 Vote: I do not like it

Great update, I think we can do the same thing for output too, no ? (like in this or this problem)

→ Reply
  • »
    »
    2 years ago, # ^ |
    ← Rev. 3   Vote: I like it 0 Vote: I do not like it

    Agree with you! it would be great if we can discriminate the outputs for the test cases as well.

    Hope everyone would be agree with us!

    → Reply
»
2 years ago, # |
  Vote: I like it 0 Vote: I do not like it

My competitive companion is not working properly after the update may you please do something for this?

→ Reply
»
2 years ago, # |
  Vote: I like it -16 Vote: I do not like it

I don't know why but I prefer the old theme

→ Reply
»
2 years ago, # |
  Vote: I like it 0 Vote: I do not like it

Good luck to all. I hope this will be the best div2 I've ever participated in.♥

→ Reply
»
2 years ago, # |
  Vote: I like it 0 Vote: I do not like it

Good Job!!

→ Reply
»
2 years ago, # |
  Vote: I like it +5 Vote: I do not like it

It should have been done much earlier. Matching the test cases would have been an eyesore. Thanks to Codeforces anyway.

→ Reply
»
2 years ago, # |
  Vote: I like it +27 Vote: I do not like it

Feature suggestion: copying only one of subtests. Maybe, this should be a button popping up when hovering the test. Of course, "1\n" should be prepended in this case to allow just pasting this subtest into participant's program.

→ Reply
»
2 years ago, # |
  Vote: I like it +29 Vote: I do not like it

Nice feature Can you make it for Output also?

→ Reply
»
2 years ago, # |
  Vote: I like it +5 Vote: I do not like it

This will definitely remind me to look at the sample carefully.

→ Reply
»
2 years ago, # |
  Vote: I like it +5 Vote: I do not like it

Great! Thank you MikeMirzayanov for providing us with such a great platform

→ Reply
»
2 years ago, # |
  Vote: I like it 0 Vote: I do not like it

Good!

→ Reply
»
2 years ago, # |
  Vote: I like it +121 Vote: I do not like it

Screenshot-2022-08-09-153306

→ Reply
»
2 years ago, # |
  Vote: I like it 0 Vote: I do not like it

cool！

→ Reply
»
2 years ago, # |
  Vote: I like it 0 Vote: I do not like it

Codeforces lord is even making it easier for our eyes. Thanks sir!

→ Reply
»
2 years ago, # |
  Vote: I like it 0 Vote: I do not like it

Great words！

→ Reply
»
2 years ago, # |
  Vote: I like it -6 Vote: I do not like it

I think it is a good idea to also colour the output accordingly.

→ Reply
»
2 years ago, # |
← Rev. 2   Vote: I like it +76 Vote: I do not like it

It's a good idea. I suggest that the name of the variable appears when you move the mouse and it points to it in the input.

→ Reply
»
2 years ago, # |
  Vote: I like it +19 Vote: I do not like it

Official dark theme when? :P

→ Reply
  • »
    »
    2 years ago, # ^ |
    ← Rev. 2   Vote: I like it 0 Vote: I do not like it

    I use the Dark Reader extension on my browser and it gives great results.

    Only issue is that the colors in the logo are off, but that's very minor and could be fixable with proper configuration.

    Edit: for some reason the image isn't working and I can't figure out why so here https://imgur.com/a/SDONl8J

    → Reply
»
2 years ago, # |
  Vote: I like it -11 Vote: I do not like it

Cool! But why outputs don't look like that?

→ Reply
»
2 years ago, # |
  Vote: I like it +5 Vote: I do not like it

This is an amazing addition, it really helps in finding the input for the ith case without having to count the lines. What can make it even better is if it was added for the output too so we can easily match every input with its respective output, and possibly a button in the settings to enable/disable the feature incase someone doesn't like it or because I imagine it will probably break some extensions users use.

→ Reply
»
2 years ago, # |
  Vote: I like it 0 Vote: I do not like it

I think "T" need another color

→ Reply
»
2 years ago, # |
  Vote: I like it 0 Vote: I do not like it

I won't forget to input $$$t$$$ and get a $$$\tt Wrong\;answer\;on\;test\;1$$$ any more. XD

→ Reply
  • »
    »
    2 years ago, # ^ |
      Vote: I like it 0 Vote: I do not like it

    I added it to the default code of codeblocks because there are more problems with testcases than without.

    → Reply
»
2 years ago, # |
  Vote: I like it +5 Vote: I do not like it

I need this thing in my console window, if you look at my old submissions you might see cout << " " << etc; in there, which I added just to tell input from output.

→ Reply
»
2 years ago, # |
← Rev. 2   Vote: I like it +30 Vote: I do not like it

Of course, it would be cool to have similar highlighting in example outputs as well. And even, say, synchronously highlight an input-output test case pair when hovering over. Unfortunately, standard checkers are often used, in which information about test cases is lost. Perhaps I'll apply some heuristics to make it work in most cases.

If you already know about test cases, you can run author solution on each of test cases, check that concatenation of this separate outputs is the correct output and use them for highighting. Luckily the sample test cases are small

→ Reply
»
2 years ago, # |
  Vote: I like it 0 Vote: I do not like it

Ohh man! sheiii!

→ Reply
»
2 years ago, # |
← Rev. 2   Vote: I like it 0 Vote: I do not like it

Nice!It really helps me while debugging.

→ Reply
»
2 years ago, # |
  Vote: I like it +21 Vote: I do not like it

Nice update but there is a problem now! There is no newline character at the end of all test cases. When I copy and pasted testcases I have to manually insert newline. Can you fix this

→ Reply
»
2 years ago, # |
  Vote: I like it +12 Vote: I do not like it

Codeforces has the best User Interface is my opinion among all online coding websites. Just love this website so much!

→ Reply
»
2 years ago, # |
  Vote: I like it 0 Vote: I do not like it

That releases my eye's stress , it's very good!

→ Reply
»
2 years ago, # |
  Vote: I like it +10 Vote: I do not like it

In the old system, when you copy&pasted the input, there was inserted a carriage return at the end of the text. Then, all test cases where executed once you pasted the input.

Now this carriage return is missing, and you have to insert it manually. It is specially confusing if you are debugging code, as you paste, get to the dubugging page, and then you have to change to the prompt screen to insert this return when the execution gets to the last case.

I suppose I will get used to it, but I think it was much better with the carriage return. I don't know if the new behaviour is intended or accidental. Anybody else has had problems with it?

Anyway, the visualization in different colors is great. Thanks for all!

→ Reply
»
2 years ago, # |
  Vote: I like it 0 Vote: I do not like it

Nice update MikeMirzayanov! I wanted to request to do the same thing for the sample output. It would help when output for each test case has to be multiple line like in 1714D - Покрась вхождениями. Thank you!

→ Reply
»
2 years ago, # |
  Vote: I like it 0 Vote: I do not like it

Great

→ Reply
»
2 years ago, # |
← Rev. 2   Vote: I like it 0 Vote: I do not like it

very nice feature, I think it would help me achieve blue again fast :)

→ Reply
»
2 years ago, # |
  Vote: I like it +3 Vote: I do not like it

minor bug report:

For problems with a blank line between testcases like 1767A - Разрежь треугольник and 1742C - Полосы if I use the 'Copy' button in the upper right of the 'Example' pane, the data features an extra newline in addition to the expected 2 for each 1 blank line. In hex terms, we see 0a0a0a instead of the expected 0a0a per blank line.

Select-then-copy will get the correct data.
Older problems like those in 1607 work as expected.

→ Reply