convert details to spoiler tag
This commit is contained in:
Nathan Wang
parent
d5a419f5b9
commit
42d6643285
8 changed files with 42 additions and 74 deletions
|
|
@ -72,9 +72,10 @@ This will render as a list in the homepage, but won't appear in the article.
|
|||
Spoilers are collapsible elements that only show themselves when the user clicks on it. It's useful
|
||||
when writing solutions to problems. The styling of the spoilers is still a work in progress (especially for spoilers in lists).
|
||||
|
||||
// TODO update spoiler docs to reflect new tag
|
||||
|
||||
```
|
||||
<details>
|
||||
<summary>Show Solution</summary>
|
||||
<spoiler title="Show Solution">
|
||||
|
||||
- Insert OP benq solution here
|
||||
</details>
|
||||
|
|
|
|||
|
|
@ -15,9 +15,7 @@ Email your proposal to Professor Dean. In the [past](http://www.usaco.org/index.
|
|||
- All problems should have 10 test cases at minimum (I believe that the maximum was 21 for [valleys](http://www.usaco.org/index.php?page=viewproblem2&cpid=950)). You do not need to include these in your proposal.
|
||||
- All statements must eventually be converted to the following format. It's not required, but please save us time by following it as best you can.
|
||||
|
||||
<details>
|
||||
|
||||
<summary>2020 Open Gold - Favorite Colors</summary>
|
||||
<spoiler title="2020 Open Gold - Favorite Colors">
|
||||
|
||||
```
|
||||
http://www.usaco.org/index.php?page=viewproblem2&cpid=1042
|
||||
|
|
@ -25,8 +23,6 @@ bolded text should be surrounded by [b][/b], italics by [i][/i]
|
|||
use [ol][/ol] for numbered list
|
||||
---
|
||||
|
||||
<module-excerpt>
|
||||
|
||||
Each of Farmer John's $N$ cows ($1\le N\le 2\cdot 10^5$) has a favorite color.
|
||||
The cows are conveniently labeled $1\ldots N$ (as always), and each color can be
|
||||
represented by an integer in the range $1\ldots N$.
|
||||
|
|
@ -73,4 +69,4 @@ favorite color 1.
|
|||
[/section]
|
||||
```
|
||||
|
||||
</details>
|
||||
</spoiler>
|
||||
|
|
@ -16,9 +16,7 @@ Although both Python and Java receive two times the C++ time limit in USACO, thi
|
|||
|
||||
- Rewriting the C++ solution for [USACO Silver Wormsort](http://www.usaco.org/index.php?page=viewproblem2&cpid=992) in Python receives TLE (Time Limit Exceeded) on 2/10 cases. I'm not sure whether it is possible to pass this problem with Python.
|
||||
|
||||
<details>
|
||||
|
||||
<summary>Python3 8/10 Solution</summary>
|
||||
<spoiler title="Python3 8/10 Solution">
|
||||
|
||||
```py
|
||||
# 8/10 test cases ...
|
||||
|
|
@ -91,13 +89,11 @@ Although both Python and Java receive two times the C++ time limit in USACO, thi
|
|||
fout.write('\n')
|
||||
```
|
||||
|
||||
</details>
|
||||
</spoiler>
|
||||
|
||||
- A similar solution in Java requires almost 3s, which is fairly close to the time limit of 4s.
|
||||
|
||||
<details>
|
||||
|
||||
<summary>Java Solution</summary>
|
||||
<spoiler title="Java Solution">
|
||||
|
||||
```java
|
||||
import java.io.*; // from Nick Wu
|
||||
|
|
@ -167,12 +163,11 @@ Although both Python and Java receive two times the C++ time limit in USACO, thi
|
|||
}
|
||||
```
|
||||
|
||||
</details>
|
||||
</spoiler>
|
||||
|
||||
- A comparable C++ solution runs in less than 700ms.
|
||||
|
||||
<details>
|
||||
<summary>C++ Solution</summary>
|
||||
<spoiler title="C++ Solution">
|
||||
|
||||
```cpp
|
||||
#include <bits/stdc++.h>
|
||||
|
|
@ -228,7 +223,7 @@ Although both Python and Java receive two times the C++ time limit in USACO, thi
|
|||
cout << minW;
|
||||
}
|
||||
```
|
||||
</details>
|
||||
</spoiler>
|
||||
|
||||
## Other Notes
|
||||
|
||||
|
|
|
|||
|
|
@ -36,9 +36,7 @@ This class can often lessen the implementation needed in a lot of bronze problem
|
|||
|
||||
For example, here is a nice implementation of the problem [Blocked Billboard](http://usaco.org/index.php?page=viewproblem2&cpid=759) ([editorial](http://www.usaco.org/current/data/sol_billboard_bronze_dec17.html)).
|
||||
|
||||
<details>
|
||||
|
||||
<summary>Java Solution</summary>
|
||||
<spoiler title="Java Solution">
|
||||
|
||||
```java
|
||||
import java.awt.Rectangle; //needed to use Rectangle class
|
||||
|
|
@ -78,15 +76,13 @@ public class blockedBillboard{
|
|||
}
|
||||
|
||||
```
|
||||
</details>
|
||||
</spoiler>
|
||||
|
||||
## Rectangle Class (C++)
|
||||
|
||||
Unfortunately, C++ doesn't have a built in rectangle class, so you need to write the functions yourself. Here is the solution to Blocked Billboard written in C++ (thanks, Brian Dean!).
|
||||
|
||||
<details>
|
||||
|
||||
<summary>C++ Solution</summary>
|
||||
<spoiler title="C++ Solution">
|
||||
|
||||
```cpp
|
||||
#include <iostream>
|
||||
|
|
@ -121,7 +117,7 @@ int main(){
|
|||
}
|
||||
|
||||
```
|
||||
</details>
|
||||
</spoiler>
|
||||
|
||||
## Problems
|
||||
|
||||
|
|
|
|||
|
|
@ -69,9 +69,7 @@ for each $i\in [1,N-1]$. Every spanning tree other than the root is contained wi
|
|||
|
||||
Overall, the runtime is $O(NMK\alpha(N))$ for storing the information about each spanning tree and $O(NK\log (NK))$ for maintaing the priority queue of objects so that we can extract the minimum. Note that with the second approach mentioned in the first section the running time would instead be $O(NMK\alpha(N)\log ans)$, which may be too slow.
|
||||
|
||||
<details>
|
||||
|
||||
<summary>My Solution</summary>
|
||||
<spoiler title="My Solution">
|
||||
|
||||
```cpp
|
||||
#include <bits/stdc++.h>
|
||||
|
|
@ -128,7 +126,7 @@ int main() {
|
|||
}
|
||||
```
|
||||
|
||||
</details>
|
||||
</spoiler>
|
||||
|
||||
|
||||
## [USACO Robotic Cow Herd](http://www.usaco.org/index.php?page=viewproblem2&cpid=674)
|
||||
|
|
@ -145,9 +143,7 @@ Importantly, we should then sort the locations by their respective second-minimu
|
|||
|
||||
Binary search on the cost $c$ of the $K$-th robot. If we can compute the costs of all robots with cost at most $c$ or say that there are more than $K$ in $O(K)$ time, then we can solve this problem in $O(N\log N+K\log \max(c))$ time (similar to "Approach 2" above). This is the approach that the first analysis solution takes, although it includes an extra $\log N$ factor due to `upper_bound`. I have removed this in my solution below.
|
||||
|
||||
<details>
|
||||
|
||||
<summary>My Solution 1</summary>
|
||||
<spoiler title="My Solution 1">
|
||||
|
||||
```cpp
|
||||
#include <bits/stdc++.h>
|
||||
|
|
@ -206,7 +202,7 @@ int main() {
|
|||
}
|
||||
```
|
||||
|
||||
</details>
|
||||
</spoiler>
|
||||
|
||||
## Approach 2
|
||||
|
||||
|
|
@ -242,9 +238,7 @@ None of these options can result in a robot of lower cost. In general, suppose t
|
|||
|
||||
Since there exists exactly one way to get from the cheapest robot to every possible robot, we can just use a priority queue.
|
||||
|
||||
<details>
|
||||
|
||||
<summary>My Solution 2</summary>
|
||||
<spoiler title="My Solution 2">
|
||||
|
||||
```cpp
|
||||
#include <bits/stdc++.h>
|
||||
|
|
@ -292,7 +286,7 @@ int main() {
|
|||
}
|
||||
```
|
||||
|
||||
</details>
|
||||
</spoiler>
|
||||
|
||||
## Other Problems
|
||||
|
||||
|
|
|
|||
|
|
@ -45,9 +45,7 @@ We'll process the shares in order. Suppose that on the current day shares are wo
|
|||
|
||||
The implementation is quite simple; maintain a priority queue that allows you to pop the minimum element.
|
||||
|
||||
<details>
|
||||
|
||||
<summary>My Solution</summary>
|
||||
<spoiler title="My Solution">
|
||||
|
||||
```cpp
|
||||
#include <bits/stdc++.h>
|
||||
|
|
@ -68,7 +66,7 @@ int main() {
|
|||
cout << ans << "\n";
|
||||
}
|
||||
```
|
||||
</details>
|
||||
</spoiler>
|
||||
|
||||
## [Potatoes](https://oj.uz/problem/view/LMIO19_bulves)
|
||||
|
||||
|
|
@ -83,9 +81,7 @@ As before, this DP is concave up for a fixed $i$! Given a piecewise linear funct
|
|||
|
||||
Again, these can be done with a priority queue in $O(N\log N)$ time!
|
||||
|
||||
<details>
|
||||
|
||||
<summary>My Solution</summary>
|
||||
<spoiler title="My Solution">
|
||||
|
||||
```cpp
|
||||
#include <bits/stdc++.h>
|
||||
|
|
@ -119,7 +115,7 @@ int main() {
|
|||
}
|
||||
|
||||
```
|
||||
</details>
|
||||
</spoiler>
|
||||
|
||||
## [Landscaping](http://www.usaco.org/index.php?page=viewproblem2&cpid=650)
|
||||
|
||||
|
|
@ -143,9 +139,7 @@ If we maintain separate deques for $dif$ depending on whether $j\ge 0$ or $j<0$
|
|||
|
||||
Bonus: Solve this problem when $\sum A_i+\sum B_i$ is not so small.
|
||||
|
||||
<details>
|
||||
|
||||
<summary>My Solution</summary>
|
||||
<spoiler title="My Solution">
|
||||
|
||||
```cpp
|
||||
#include <bits/stdc++.h>
|
||||
|
|
@ -184,7 +178,7 @@ int main() {
|
|||
cout << ans << "\n";
|
||||
}
|
||||
```
|
||||
</details>
|
||||
</spoiler>
|
||||
|
||||
## Problems
|
||||
|
||||
|
|
|
|||
|
|
@ -2,13 +2,19 @@ import "./src/styles/main.css";
|
|||
import React from "react";
|
||||
import { MDXProvider } from "@mdx-js/react";
|
||||
|
||||
const SpoilerComponent = ({ children }) => {
|
||||
const SpoilerComponent = ({ children, title }) => {
|
||||
const [show, setShow] = React.useState(false);
|
||||
|
||||
return (
|
||||
<div className={`px-4 border border-gray-200 rounded-md spoiler ${show?"spoiler--show":"spoiler--hide"}`}
|
||||
onClick={e => {if (e.target.classList.contains("spoiler-label")) setShow(!show) }}>
|
||||
{children}
|
||||
<div className={`border border-gray-200 rounded-md`}>
|
||||
<p className="p-4 flex items-start"
|
||||
onClick={e => setShow(!show)} style={{ marginBottom: 0 }}>
|
||||
{show && <svg className="h-6 w-6 text-gray-500 mr-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>}
|
||||
{!show && <svg className="h-6 w-6 text-gray-500 mr-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>}
|
||||
{title}
|
||||
</p>
|
||||
|
||||
{show && <div className="p-4 pt-0 spoiler-body">{children}</div>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -25,14 +31,7 @@ const components = {
|
|||
return children;
|
||||
},
|
||||
"module-excerpt": (props) => <div {...props} />,
|
||||
details: SpoilerComponent,
|
||||
summary: ({ children }) => (
|
||||
<p className="spoiler-label py-4 flex items-start">
|
||||
<svg className="h-6 w-6 text-gray-500 mr-4 spoiler-label__open" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
<svg className="h-6 w-6 text-gray-500 mr-4 spoiler-label__closed" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
|
||||
{children}
|
||||
</p>
|
||||
),
|
||||
spoiler: SpoilerComponent,
|
||||
"info-block": ({ children }) => (
|
||||
<div className="rounded-md bg-blue-50 p-4 info-block mb-4">
|
||||
<div className="flex">
|
||||
|
|
|
|||
|
|
@ -137,17 +137,10 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.spoiler--hide > *:not(.spoiler-label) {
|
||||
display: none;
|
||||
}
|
||||
.spoiler--hide .spoiler-label__open {
|
||||
display: none;
|
||||
}
|
||||
.spoiler--show .spoiler-label__closed {
|
||||
display: none;
|
||||
}
|
||||
.spoiler-label {
|
||||
margin-bottom: 0 !important;
|
||||
.spoiler-body pre {
|
||||
margin-left: -1rem !important;
|
||||
margin-right: -1rem !important;
|
||||
margin-bottom: -1rem !important;
|
||||
}
|
||||
|
||||
.info-block .custom-block-heading {
|
||||
|
|
|
|||
Reference in a new issue