Skip to content

Commit

Permalink
slider disabling
Browse files Browse the repository at this point in the history
  • Loading branch information
tlodge committed Apr 8, 2022
1 parent 04a4d5b commit 6534da5
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 17 deletions.
28 changes: 16 additions & 12 deletions components/Slider.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,34 @@ import useD3 from '../hooks/useD3';
const qscale = d3.scaleLinear().clamp(true).domain([100, 685]).range([0,100]);
const ascale = d3.scaleLinear().clamp(true).domain([0,100]).range([100,685]);

const Slider = ({end, setAnswer, answer, dim}) => {

const Slider = ({end, setAnswer, answer, dim, enabled}) => {

const updateAnswer = (answer)=>{
setAnswer(answer)
}

const slider = useD3((root)=>{

const controller = root.select("circle#dragcircle");
controller.attr("cx", ascale(answer == -1 ? 0: answer));
const controller = root.select("circle#dragcircle");
controller.attr("cx", ascale(answer == -1 ? 0: answer));

controller.call(d3.drag().on("drag", (e)=>{
e.sourceEvent.stopPropagation();
updateAnswer(qscale(e.x))
}).on("end", ()=>{
end();
}));
controller.call(d3.drag().on("drag", (e)=>{
if (enabled){
e.sourceEvent.stopPropagation();
updateAnswer(qscale(e.x))
}
}).on("end", ()=>{
if (enabled){
end();
}
}));

});

const SVGHEIGHT = 60;

return <div style={{display:"flex", justifyContent:"center", alignItems:"center", flexDirection:"row"}}>
<svg ref={slider} width={800} height={SVGHEIGHT} className={styles.trianglesvg}>
<svg ref={slider} width={800} height={SVGHEIGHT} className={styles.trianglesvg} style={{opacity: enabled ? 1.0: 0.2}}>
<text className={styles.sliderlabel} x={45} y={30} style={{fontSize:"0.9em",fill:"white", textAnchor:"middle"}}>Not at all</text>
<g>
<rect x={100} y={20} width={585} rx={5} ry={5} height={10} style={{opacity:0.3,fill:"white"}}></rect>
Expand Down
10 changes: 5 additions & 5 deletions pages/shapes.js
Original file line number Diff line number Diff line change
Expand Up @@ -105,8 +105,9 @@ export default function Home(props) {
dispatch(setDimension(nd));
setQuestion("q1");
setQuestionText(allquestions[chapter][nd]["q1"]);
console.log("SET COMPLETED TO TRUE");
setCompleted(true);
if (nd === "d1"){
setCompleted(true);
}
}else{
setQuestion(nq)
setQuestionText(questions[nq][0]);
Expand Down Expand Up @@ -154,7 +155,6 @@ export default function Home(props) {
};

const moveToFinal = ()=>{
console.log("dispatching save shape!!");
dispatch(saveShape())
setView("final")
}
Expand All @@ -169,9 +169,9 @@ const renderDimensions = ()=>{


return <div style={{background: "rgba(255,255,255,0.05)", padding:20, borderRadius:8}}>
<div className={styles.questiontext} dangerouslySetInnerHTML={{__html:questionText}}></div>
<div className={styles.questiontext} dangerouslySetInnerHTML={{__html: completed ? "" : questionText}}></div>

<Slider dim={dimension} question={question} answer={answers[dimension][question]} setAnswer={(answer)=>_setAnswer(answer)} end={()=>{
<Slider dim={dimension} question={question} enabled={!completed} answer={answers[dimension][question]} setAnswer={(answer)=>_setAnswer(answer)} end={()=>{
setEnded(true);
}}/>

Expand Down

1 comment on commit 6534da5

@vercel
Copy link

@vercel vercel bot commented on 6534da5 Apr 8, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

trustme – ./

trustme-tlodge.vercel.app
trustme-git-main-tlodge.vercel.app
trustme-liart.vercel.app

Please sign in to comment.