东北大学新OJ答题界面重新布局脚本

需求

最近重新刷起了学校自己的OJ。老版本OJ答题界面是全屏展示的，而新版本左半部分展示题目，右半部分为文本输入框，这样有一些影响阅读。每次做新的题目我都要通过更改前端代码的方式把界面调成图二所示，将文本输入框移动至题目下方，但这样无疑有一些麻烦。为了避免每次都要更改前端代码的麻烦，于是这个脚本诞生了。

如果想要直接使用的话按照下一节内容配置即可。在那之后我会简述原理。

如何使用

Tampermonkey安装

Tampermonkey 是一款免费的浏览器扩展和最为流行的用户脚本管理器，它适用于 Chrome, Microsoft Edge, Safari, Opera Next, 和 Firefox。附上该扩展的网址：https://www.tampermonkey.net/一些浏览的扩展商店由于一些原因无法访问，大家可以自行寻找解决方案。

通俗来讲，它的功能就是，每次访问指定的页面时，会执行指定的js代码。

Tampermonkey配置

在Tampermonkey的管理界面中，新建用户脚本。

将下面的代码复制进去，保存即可。要注意的是，顶部的注释也要复制进去，因为这不是单纯的注释，而是配置信息。

// ==UserScript==
// @name         NEUoj答题界面优化
// @namespace    http://chenjinsui.xyz/
// @version      2.0
// @description  将题目扩展至全屏显示，将提交区域移至下方。将C++14设置为默认提交语言。
// @author       FengLing
// @match        https://f-oj.neu.edu.cn/problems/*
// @require      http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
// @icon         https://pass.neu.edu.cn/tpass/neuicon.ico
// ==/UserScript==

(function() {
    'use strict';

    var a = $("div.row>div.col-7");
    a.addClass("col-10");
    a.removeClass("col-7");
    a.addClass("container-fluid");

    var b = $("div.row>div.col-5");
    b.addClass("container-fluid");
    b.addClass("col-10");
    b.removeClass("div.col-5");

    var lang_C = $("[value=1]");
    var lang_Cpp14 = $("[value=3]");
    lang_C.attr("value", "3");
    lang_C.html("C++14");
    lang_Cpp14.attr("value", "1");
    lang_Cpp14.html("C");

})();

原理

html代码分析

截取了和题目布局相关的如下代码。

可以看到，OJ采用BootStrap布局，题目描述与文本输入框在同一个row中，题目描述占4个col，文本输入框占6个col。可以将它们的col都改为10达到全屏的效果。为了使文本输入框居中显示，还要为其增加container-fluid的class。

下面是语言选择相关的代码。

因为我常使用C++14提交答案，故要将其作为默认语言，免去了每次选择语言的麻烦。采用的方法是将C与C++14两个标签互换位置。

实现

使用正则https://f-oj.neu.edu.cn/problems/*进行匹配题目。
将东北大学某个校内网站的图标URLhttps://pass.neu.edu.cn/tpass/neuicon.ico作为本脚本的icon地址。
再选择合适的选择器选择对象，进行修改。