用 html 沟通的一些想法

vlambda
2020-04-11

用 html 沟通的一些想法

疫情期间突显出了在线学习的需求, 同时一个激烈的矛盾是教师与家长监督子女学习的工作. 机器学习能否成为孩子知识领域的引路人我们还不得而知, 但是实现这样的学习工具的技术已经悄然诞生了.

一. html 简介

二. MathML 简介

三. 交互式图片工具 Plotly

一. html 简介

Hyper Text Markup Language (html) 可以翻译为超文本标记语言. 是当前广泛流行的网页文件. 如果你现在PC看一个网页, 点击快捷键 ctrl+s 进行保存, 通常都会保存为 .html 格式.

小案例, 新建一个 index.html 文件, 用记事本打开输入代码:

<html><head><title> index </title></head><body><h1> Hello, shuxueyun! </h1></body></html>

保存以后, 就可以用浏览器打开, 看到网页上显示出一级标题 Hello, shuxueyun!

大案例: 视频网站使用 html5取代 flash 已经不是新鲜事了, 国内的 bilibili与国外的youtube 都采用了双格式可选. 因此最近火爆的 manimlib 数学工具生成的动图或视频是完全可以兼容的.

各种 html 控件更是历史悠久, 单选题,多选题的录入和判卷. 而近年来, 口算判题手机软件的出现说明图像识别有关的机器学习已经趋于成熟. 下一步自然语言的机器学习能否胜任主观题的判卷还是未知数.

到目前位置我们只能看出来, 好吧, 这确实是个可以做网页的语言, 与在线教学有何关系呢?

二. MathML 简介

mathml 可以参考文献 :

Mathematical Markup Language (MathML) Version 3.0 2nd Edition, W3C Recommendation 10 April 2014

模仿一个案例:

<html><head><title> index </title></head><body><h1>Integral</h1><math><mrow><msubsup><mi>&int;</mi><mi>a</mi><mi>b</mi></msubsup><mi>cos</mi>(<mi>x</mi>) <mo> d</mo><mi>x</mi></mrow></math></body></html>

使用火狐浏览器即可享用.

三. 交互式图片工具 Plotly

plotly 是企业级的数据可视化工具包, 兼容 python, R语言. 绘图效果惊艳, 交互流畅, 也是接受捐助的开源项目. 他们的宣传口号是

"Operationalize Python & R models,in days, not months."

其实和 python宣传语很像了.

"Life is short. Use python."

官网 plotly.com

案例:

https://plotly.com/python/

https://plotly.com/r/

plotly 可以输出交互式网页, 可以是离线或者在线. 以python代码为例:

import numpy as npimport plotly.graph_objs as gofrom plotly.offline import plot, get_plotlyjs
T=np.linspace(0,2*np.pi,121)R=np.linspace(0,0.5,121)r,t=np.meshgrid(R,T)x=r*np.cos(t)y=r*np.sin(t)z=x**2-y**2
data=go.Surface(x=x,y=y,z=z)fig=go.Figure([data])div1=plot(fig,output_type='div',include_plotlyjs=False)html = '''<html> <head> <script type="text/javascript">{plotlyjs}</script> </head> <body> <h1>Hello</h1> <math> f(x,y)= <msup><mn>x</mn><mi>2</mi></msup> -<msup><mn>y</mn><mi>2</mi></msup> </math> {div1} </body></html>'''.format(plotlyjs=get_plotlyjs(), div1=div1) with open('multi_plot.html', 'w') as f: f.write(html)

用火狐浏览器打开后的效果

网页交互浏览图像的效果:

vlambda博客
学习文章列表