Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
第9回Web分科会 実習
<!DOCTYPE html>
<title>CTF Flag Matcher</title>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src="" charset="utf-8"></script>
<script type="text/jsx" src="flag-matcher.jsx"></script>
<link href="" rel="stylesheet">
h1 {
text-align: center;
font-size: 4em;
h2 {
margin: 0 0 0.5em;
.name-area {
width: 40%;
.problems {
padding: 0;
.problem {
padding: 1em;
background: #555;
border-radius: 5px;
margin: 1em 0;
list-style: none;
<div class="container">
<h1>CTF Flag Matcher</h1>
<div id="container"></div>
class NameInput extends React.Component {
onInput(event) {
render() {
return <div className="name-area form-group">
Your Name: <input className="form-control" type="text" onInput={this.onInput}></input>
class Problem extends React.Component {
onClick(event) {
render() {
return <li className="problem">
<h2>[input title here]</h2>
<div className="form-group">
<label className="control-label">Flag</label>
<input className="form-control" type="password"></input>
<button className="btn btn-default submit-button" onClick={this.onClick}>Check</button>
class Problems extends React.Component {
render() {
return <ul className="problems">
{ => (
<Problem key={problem.title} problem={problem}/>
class ProblemForm extends React.Component {
onSubmit(event) {
const title =;
const flag =;
render() {
return <form className="add-problem" onSubmit={this.onSubmit}>
<div className="form-group">
<label htmlFor="title">Title</label>
<input type="text" className="form-control" id="title" name="title"/>
<div className="form-group">
<label htmlFor="flag">Flag</label>
<input type="text" className="form-control" id="flag" name="flag" placeholder="flag{xxxxx}"/>
<button type="submit" className="btn btn-primary">Add Problem</button>
class Matcher extends React.Component {
constructor(props) {
this.state = {problems: [], name: 'noname'};
render() {
return <div className="matcher">
<Problems problems={this.state.problems}/>
const matcher = ReactDOM.render(<Matcher/>, document.getElementById('container'));
matcher.setState({problems: [{
title: 'sanity check',
flag: 'flag{hogehoge}',
solvers: ['hakatashi', 'cookies'],
}, {
title: 'yet another problem',
flag: 'flag{fugafuga}',
solvers: ['satos'],
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.