diff --git a/bricks/qaframe.js b/bricks/qaframe.js new file mode 100644 index 0000000..1680329 --- /dev/null +++ b/bricks/qaframe.js @@ -0,0 +1,125 @@ +bricks = window.bricks || {}; + +bricks.QAFrame = class extends bricks.PopupWindow { + /* + { + ws_url: + title: + description: + courseware:{ + type: "audio" or "video", "image", "markdown" + url: + timeout: + } + timeout:0 no timeout, number in seconds + + } + */ + constructor(opts){ + super(opts); + this.top_w = new bricks.HBox({ + cheight:2 + }); + this.bottom_w = new bricks.HBox({ + cheight:2 + }); + this.main_w = new bricks.Filler({}); + this.add_widget(this.top_w); + this.add_widget(this.main_w); + this.add_widget(this.bottom_w); + this.ws = new bricks.WebSocket(this.ws_url); + if (this.courseware){ + this.play_course(); + } else { + this.show_conform(); + } + } + build_startbtn(){ + var btn = new bricks.Button({ + label:'press to start' + }); + btn.bind('click', this.start_answer_question.bind(this)); + this.bottom_w.add_widget(btn); + } + start_answer_question(){ + var d = { + 'type': 'qa_start', + 'data': null + }; + this.ws.send(d) + } + async send_audio_answer(e){ + var audio = e.data; + var b64audio = blobToBase64(audio.audio); + this.ws.send({ + type: 'audio_answer', + data: b64audio + }) + } + send_text_answer(e){ + var answer = e.data; + console.log('answer=', answer); + this.ws.send({ + type: 'text_answer', + data: answer.texta + }); + } + build_input_widgets(){ + var hw = StrInput({ + name:texta, + css:'filler' + }); + var speakw = new bricks.AudioRecorder({ + icon_rate:1.7, + padding: '6px' + }); + /* + var imagew = new bricks.Icon({ + rate:1.7, + padding: '6px', + url: bricks_resource('imgs/camera.png') + }); + var videow = new bricks.Icon({ + rate: 1.7, + padding: '6px', + url: bricks_resource('imgs/recorder.png') + }); + this.bottom_w.add_widget(imagew); + this.bottom_w.add_widget(videow); + */ + hw.bind('blur', this.send_text_answer.bind(this)); + speakw.bind('record_ended', this.send_audio_data.bind(this)); + + this.bottom_w.add_widget(speakw); + this.bottom_w.add_widget(hw); + } + play_course(){ + switch(this.courseware.type){ + case 'video': + this.cw = new bricks.VideoPlayer({ + url:this.courseware.url, + autoplay:true + }); + break; + case 'audio': + this.cw = new bricks.AudioPlayer({ + url:this.courseware.url, + autoplay:true + }); + break; + case 'image': + this.cw = new bricks.Image({ + url:this.courseware.url + }); + break; + case 'markdown': + this.cw = new bricks.MdWidget({ + md_url:this.courseware.url + }); + break; + default: + return + } + this.main_w.add_widget(this.cw); + } +}